Laravel 11 + Vue Js CRUD Operation with Inertia from scratch step by step tutorial

Introduction

This tutorial will guide you through creating a complete CRUD (Create, Read, Update, Delete) application using Laravel 11, Vue.js, and Inertia.js. By the end of this guide, you'll be able to set up a functional application that allows users to manage products seamlessly.

Step 1: Set Up Your Environment

Before diving into the CRUD operations, ensure that you have the following prerequisites:

• Laravel 11 installed on your machine.
• Vue.js and Inertia.js properly set up in your Laravel project.
• A working database connection configured in your .env file.

If you need guidance on setting up your Laravel environment, refer to the additional video linked in the description.

Step 2: Create Routes for Resource Controller

1. Open the routes/web.php file in your Laravel application.
2. Add the resource route for products:

   Route::resource('products', ProductController::class);
   

Step 3: Generate the Product Controller

1. Open your terminal.
2. Run the following Artisan command to create a resource controller:

   php artisan make:controller ProductController --resource
   

3. This command will create a controller with methods for all CRUD operations.

Step 4: Create Model and Migration

1. Create a model and migration file for products:

   php artisan make:model Product -m
   

2. Open the migration file located in database/migrations to define the product table structure. Add the fields:

   Schema::create('products', function (Blueprint $table) {
       $table->id();
       $table->string('name');
       $table->integer('price');
       $table->timestamps();
   });
   

3. Run the migration to create the table:

   php artisan migrate
   

Step 5: Define the Product Model

1. Open the app/Models/Product.php file.
2. Define the fillable fields:

   protected $fillable = ['name', 'price'];
   

Step 6: Implement Controller Methods

1. In ProductController, implement the index, create, store, edit, update, and destroy methods.
2. Example for the index method:

   public function index()
   {
       $products = Product::all();
       return inertia('Product/Index', ['products' => $products]);
   }
   

3. Implement similar logic for other methods. Use Inertia to render the views.

Step 7: Create Vue Components

1. Create the Vue components for listing products, creating a product, editing a product, and showing product details.
2. In resources/js/Pages/Product/Index.vue, set up a table to display products:

   <template>
       <div>
           <h5>Product List</h5>
           <table>
               <thead>
                   <tr>
                       <th>ID</th>
                       <th>Name</th>
                       <th>Price</th>
                       <th>Actions</th>
                   </tr>
               </thead>
               <tbody>
                   <tr v-for="product in products" :key="product.id">
                       <td>{{ product.id }}</td>
                       <td>{{ product.name }}</td>
                       <td>{{ product.price }}</td>
                       <td>
                           <Link :href="route('products.edit', product.id)">Edit</Link>
                           <button @click="deleteProduct(product.id)">Delete</button>
                       </td>
                   </tr>
               </tbody>
           </table>
       </div>
   </template>
   

Step 8: Handling Product Creation and Errors

1. In your Create.vue component, implement a form to add new products.
2. Use v-model for inputs and handle form submission with Inertia:

   <form @submit.prevent="submit">
       <input v-model="form.name" placeholder="Product Name" />
       <input v-model="form.price" type="number" placeholder="Product Price" />
       <button type="submit">Save Product</button>
   </form>
   

Step 9: Implement Validation and Flash Messages

1. In the store method of ProductController, validate the incoming request:

   $request->validate([
       'name' => 'required|string|max:255',
       'price' => 'required|integer',
   ]);
   

2. Use session flash messages to inform users of successful operations.

Step 10: Implement Update and Delete Functionality

1. In the edit method, retrieve the product using its ID and return it to the edit view.
2. Update the product in the update method after validating the input.
3. For deletion, confirm the action and use:

   $product->delete();
   

Conclusion

You have successfully set up a CRUD application using Laravel 11, Vue.js, and Inertia.js. This tutorial covered the essential steps from routing to implementing CRUD operations. Next, consider enhancing your application with features like authentication, pagination, and more complex validations to improve user experience further.