Create CRUD Application with Laravel and Vue.js

Introduction

In this tutorial, we will create a CRUD (Create, Read, Update, Delete) application using Laravel and Vue.js. This guide is designed for developers looking to harness the power of Laravel for backend development while utilizing Vue.js for a dynamic front-end experience. By the end of this tutorial, you’ll have a fully functional application that allows users to manage data seamlessly.

Step 1: Setting Up Your Environment

• Install Laravel:
  • Ensure you have Composer installed on your machine.
  • Run the following command to create a new Laravel project:

    composer create-project --prefer-dist laravel/laravel laravel-vue-crud
    

• Install Vue.js:
  • Navigate to your project directory:

    cd laravel-vue-crud
    

  • Install Vue.js via npm:

    npm install vue
    

Step 2: Create the Database

• Set up your database:
  • Create a new database in your preferred database management tool (e.g., MySQL).
  • Update your .env file with the database credentials:

    DB_DATABASE=your_database_name
    DB_USERNAME=your_username
    DB_PASSWORD=your_password
    

Step 3: Create a Migration for Data Structure

• Generate a migration file:
  • Use Artisan to create a migration:

    php artisan make:migration create_items_table --create=items
    

• Define the schema:
  • Open the migration file in database/migrations/ and define your table structure:

    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('description');
            $table->timestamps();
        });
    }
    

• Run the migration:

  php artisan migrate
  

Step 4: Create a Model

• Generate the model:
  • Create a model for the items table:

    php artisan make:model Item
    

Step 5: Set Up the API Routes

• Define routes:
  • Open routes/api.php and add the following routes for CRUD operations:

    Route::apiResource('items', ItemController::class);
    

Step 6: Create the Controller

• Generate the controller:
  • Create a controller for handling requests:

    php artisan make:controller ItemController --api
    

• Implement CRUD methods:
  • Open the ItemController.php and implement the methods:

    public function index() {
        return Item::all();
    }
    
    public function store(Request $request) {
        return Item::create($request->all());
    }
    
    public function show(Item $item) {
        return $item;
    }
    
    public function update(Request $request, Item $item) {
        $item->update($request->all());
        return $item;
    }
    
    public function destroy(Item $item) {
        $item->delete();
        return response()->noContent();
    }
    

Step 7: Set Up Vue.js Frontend

• Configure Vue.js:
  • In the resources/js/app.js file, import Vue and create a new Vue instance.
• Create components:
  • Create a Vue component for managing items, e.g., ItemComponent.vue.
• Implement CRUD functionality:
  • Use Axios to handle HTTP requests to your Laravel API. Example for fetching items:

    axios.get('/api/items')
        .then(response => {
            this.items = response.data;
        });
    

Step 8: Compile Assets

• Compile your assets:
  • Use Laravel Mix to compile your JavaScript and CSS files:

    npm run dev
    

Conclusion

You have successfully created a CRUD application with Laravel and Vue.js. This project showcases how to integrate Laravel as a backend API and Vue.js as a frontend framework, enabling a smooth data management experience. As next steps, consider adding authentication, validations, and enhancing the UI with libraries like Bootstrap or Tailwind CSS. Happy coding!