Laravel 12 Inertia.js + Vue.js CRUD Tutorial

In this comprehensive guide, you'll learn how to build a Post CRUD (Create, Read, Update, Delete) application using Laravel 12, Inertia.js, and Vue.js 3. This stack lets you enjoy Laravel’s powerful backend with the reactive user experience of Vue, without building a full-blown SPA or using APIs.

Preview: List Posts

Preview: Create Posts

Preview: Update Posts

Preview: Delete Posts

Requirements

Before we start, ensure the following are installed:

PHP 8.2+
Composer
Node.js and npm
Laravel CLI
MySQL/PostgreSQL
A web browser

Step 1: Install Laravel 12

First, create a new Laravel project:

composer create-project laravel/laravel example-app

Open .env file and update the DB settings:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=example-app-crud
DB_USERNAME=root
DB_PASSWORD=

Step 2: Install Laravel Breeze with Inertia.js + Vue

1. Install Breeze

composer require laravel/breeze --dev

2. Install Inertia Vue stack

php artisan breeze:install vue

3. Install frontend dependencies

npm install

4. Migrate default tables

php artisan migrate

Step 3: Create the Posts Table and Model

1. Generate migration

php artisan make:migration create_posts_table

2. Define the schema

Edit the generated file in database/migrations:

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('body');
    $table->timestamps();
});

3. Run migration

php artisan migrate

4. Create Post model

php artisan make:model Post

5. Update model

// app/Models/Post.php

protected $fillable = ['title', 'body'];

Step 4: Create Post Controller

php artisan make:controller PostController

Then update app/Http/Controllers/PostController.php:

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;
use Inertia\Inertia;

class PostController extends Controller
{
    public function index()
    {
        return Inertia::render('Post/Index', [
            'posts' => Post::all(),
        ]);
    }

    public function create()
    {
        return Inertia::render('Post/Create');
    }

    public function store(Request $request)
    {
        Post::create($request->validate([
            'title' => 'required|string|max:255',
            'body' => 'required|string',
        ]));

        return redirect()->route('posts.index');
    }

    public function edit(Post $post)
    {
        return Inertia::render('Post/Edit', ['post' => $post]);
    }

    public function update(Request $request, Post $post)
    {
        $post->update($request->validate([
            'title' => 'required|string|max:255',
            'body' => 'required|string',
        ]));

        return redirect()->route('posts.index');
    }

    public function destroy(Post $post)
    {
        $post->delete();
        return redirect()->back();
    }
}

Step 5: Define Routes

Open routes/web.php and add:

use App\Http\Controllers\PostController;

Route::middleware(['auth', 'verified'])->group(function () {
    Route::resource('posts', PostController::class);
});

Step 6: Create Vue Pages for CRUD

Create Folder:

mkdir resources/js/Pages/Post

🔹 `Index.vue` - List Posts

<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ref } from 'vue'

defineProps({
    posts: {
        type: Array,
        default: () => [],
    },
});

const form = useForm({});
const showDeleteModal = ref(false)
const postIdToDelete = ref(null)

const deletePost = (id) => {
    form.delete(`posts/${id}`);
};

function openDeleteModal(id) {
    postIdToDelete.value = id
    showDeleteModal.value = true
}

function cancelDelete() {
    postIdToDelete.value = null
    showDeleteModal.value = false
}

function confirmDelete() {
    deletePost(postIdToDelete.value)
    showDeleteModal.value = false
}
</script>

<template>
    <Head title="Manage Posts" />
    <AuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Manage Posts</h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900">
                        <Link href="posts/create">
                            <button class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-semibold py-1 px-3 rounded my-3 flex items-center gap-1">
                                ➕ Create
                            </button>
                        </Link>

                        <table class="table-auto w-full">
                            <thead>
                                <tr class="text-left bg-gray-200">
                                    <th class="border px-4 py-2">ID</th>
                                    <th class="border px-4 py-2">Title</th>
                                    <th class="border px-4 py-2">Content</th>
                                    <th class="border px-4 py-2 text-center" width="180px">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(post, index) in posts" :key="post.id" class="text-left hover:bg-gray-100">
                                    <td class="border px-4 py-2">{{ index + 1 }}</td>
                                    <td class="border px-4 py-2">{{ post.title }}</td>
                                    <td class="border px-4 py-2">{{ post.body }}</td>
                                    <td class="border px-4 py-2 text-center">
                                        <Link :href="`posts/${post.id}/edit`">
                                            <button class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-semibold py-1 px-2 rounded inline-flex items-center gap-1">
                                                ✏️ Edit
                                            </button>
                                        </Link>
                                        <button
                                            class="bg-red-500 hover:bg-red-700 text-white text-sm font-semibold py-1 px-2 rounded inline-flex items-center gap-1 ml-2"
                                            @click="openDeleteModal(post.id)">
                                            🗑️ Delete
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div> 
    </AuthenticatedLayout>

    <!-- Delete Confirmation Modal -->
    <div v-if="showDeleteModal" class="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
        <div class="bg-white rounded-lg shadow-md w-full max-w-sm p-6">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">Confirm Deletion</h2>
            <p class="text-gray-600 mb-6">Are you sure you want to delete this post?</p>
            <div class="flex justify-end space-x-2">
                <button @click="cancelDelete"
                    class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-1 px-4 rounded">
                    Cancel
                </button>
                <button @click="confirmDelete"
                    class="bg-red-500 hover:bg-red-700 text-white font-semibold py-1 px-4 rounded">
                    Yes, Delete
                </button>
            </div>
        </div>
    </div>
</template>

🔹 `Create.vue` - Create Post

<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, useForm, Link } from "@inertiajs/vue3";

const form = useForm({
    title: "",
    body: "",
});

const submit = () => {
    form.post("/posts");
};
</script>

<template>
    <Head title="Create Post" />

    <AuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Create Post</h2>
        </template>

        <div class="py-12">
            <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900">

                        <!-- Back Button -->
                        <Link href="/posts">
                            <button class="bg-gray-500 hover:bg-gray-700 text-white text-sm font-semibold py-1 px-3 rounded inline-flex items-center gap-1 mb-4">
                                🔙 Back
                            </button>
                        </Link>

                        <!-- Post Form -->
                        <form @submit.prevent="submit">
                            <div class="mb-4">
                                <label for="title" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
                                <input
                                    id="title"
                                    v-model="form.title"
                                    type="text"
                                    placeholder="Enter Title"
                                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                />
                                <div v-if="form.errors.title" class="text-red-500 text-sm mt-1">{{ form.errors.title }}</div>
                            </div>

                            <div class="mb-4">
                                <label for="body" class="block text-gray-700 text-sm font-bold mb-2">Body:</label>
                                <textarea
                                    id="body"
                                    v-model="form.body"
                                    placeholder="Enter Body"
                                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                ></textarea>
                                <div v-if="form.errors.body" class="text-red-500 text-sm mt-1">{{ form.errors.body }}</div>
                            </div>

                            <!-- Submit Button -->
                            <button
                                type="submit"
                                class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded inline-flex items-center gap-1"
                                :disabled="form.processing"
                            >
                                ✅ Submit
                            </button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

🔹 `Edit.vue` - Edit Post

<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, useForm, Link } from "@inertiajs/vue3";

// Props
const props = defineProps({
    post: {
        type: Object,
        required: true,
    },
});

// Form with initial data from props
const form = useForm({
    title: props.post.title,
    body: props.post.body,
});

// Submit update request
const submit = () => {
    form.put(`/posts/${props.post.id}`);
};
</script>

<template>
    <Head title="Edit Post" />

    <AuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Edit Post</h2>
        </template>

        <div class="py-12">
            <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900">

                        <!-- Back Button -->
                        <Link href="/posts">
                            <button class="bg-gray-500 hover:bg-gray-700 text-white text-sm font-semibold py-1 px-3 rounded inline-flex items-center gap-1 mb-4">
                                🔙 Back
                            </button>
                        </Link>

                        <!-- Edit Form -->
                        <form @submit.prevent="submit">
                            <div class="mb-4">
                                <label for="title" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
                                <input
                                    id="title"
                                    type="text"
                                    v-model="form.title"
                                    placeholder="Enter Title"
                                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                />
                                <div v-if="form.errors.title" class="text-red-500 text-sm mt-1">{{ form.errors.title }}</div>
                            </div>

                            <div class="mb-4">
                                <label for="body" class="block text-gray-700 text-sm font-bold mb-2">Body:</label>
                                <textarea
                                    id="body"
                                    v-model="form.body"
                                    placeholder="Enter Body"
                                    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                                ></textarea>
                                <div v-if="form.errors.body" class="text-red-500 text-sm mt-1">{{ form.errors.body }}</div>
                            </div>

                            <!-- Submit Button -->
                            <button
                                type="submit"
                                class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded inline-flex items-center gap-1"
                                :disabled="form.processing"
                            >
                                💾 Update
                            </button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

Step 7: Add Posts to Navigation Menu

Open resources/js/Layouts/AuthenticatedLayout.vue, and inside your navigation area:

<NavLink :href="route('posts.index')" :active="route().current('posts.index')">
    Posts
</NavLink>

Step 8: Open or create `bootstrap/app.php`

If the file does not exist, create it inside your project folder under /bootstrap.

Step 9: Replace or add the following full content in `bootstrap/app.php`

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Middleware;
use Illuminate\Foundation\Configuration\Exceptions;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__ . '/../routes/web.php',
        commands: __DIR__ . '/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware): void {
        // Here you append your middleware to the 'web' group
        $middleware->web(append: [
            \App\Http\Middleware\HandleInertiaRequests::class,
            \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
        ]);
    })
    ->withExceptions(function (Exceptions $exceptions): void {
        // You can customize exception handling here, or leave empty
    })
    ->create();

Step 10: Run the App

Start Laravel and the Vite dev server:

php artisan serve
npm run dev

Visit: http://localhost:8000/posts

Structure using Laravel + Inertia + Vue:

Laravel + Inertia + Vue App

├── app/

│ ├── Http/

│ │ ├── Controllers/

│ │ │ ├── PostController.php

│ │ │ └── Auth/

│ │ └── Middleware/

│ ├── Models/

│ │ └── Post.php

│ ├── Policies/

│ └── Providers/

│

├── routes/

│ ├── web.php

│ └── api.php

│

├── resources/

│ ├── js/

│ │ ├── bootstrap.js

│ │ ├── App.vue

│ │ ├── Pages/

│ │ │ ├── Dashboard.vue

│ │ │ └── Posts/

│ │ │ ├── Index.vue

│ │ │ ├── Create.vue

│ │ │ └── Edit.vue

│ │ ├── Components/

│ │ │ ├── NavLink.vue

│ │ │ ├── Pagination.vue

│ │ │ └── FormInput.vue

│ │ └── Layouts/

│ │ ├── AuthenticatedLayout.vue

│ │ └── GuestLayout.vue

│ └── views/

│ └── app.blade.php

│

├── public/

│ └── images/

│

├── database/

│ ├── factories/

│ │ └── PostFactory.php

│ ├── migrations/

│ │ └── 2024_01_01_create_posts_table.php

│ └── seeders/

│ └── PostSeeder.php

Laravel Backend (Server-Side)

app/
│
├── Http/
│   ├── Controllers/
│   │   ├── PostController.php
│   │   └── Auth/
│   └── Middleware/
│
├── Models/
│   └── Post.php
│
├── Policies/
│
└── Providers/

Routes

routes/
├── web.php          # Inertia (Vue) frontend routes
├── api.php          # Optional (if using separate API)

Vue + Inertia Frontend (Client-Side)

resources/
└── js/
    ├── App.vue                 # Main Vue root component
    ├── bootstrap.js            # Inertia and Vue setup
    ├── Pages/                  # Inertia pages (one file = one route)
    │   ├── Dashboard.vue
    │   └── Posts/
    │       ├── Index.vue       # List of posts
    │       ├── Create.vue      # Create post form
    │       └── Edit.vue        # Edit post form
    │
    ├── Components/             # Reusable components
    │   ├── NavLink.vue
    │   ├── Pagination.vue
    │   └── FormInput.vue
    │
    └── Layouts/
        ├── AuthenticatedLayout.vue
        └── GuestLayout.vue

Views

resources/views/
└── app.blade.php      # Blade template for Inertia entrypoint

Public

public/
└── images/            # Optional for uploaded images

Database

database/
├── factories/
│   └── PostFactory.php
├── migrations/
│   └── 2024_01_01_create_posts_table.php
└── seeders/
    └── PostSeeder.php

Summary of Key Files

File	Purpose
`PostController.php`	Handles CRUD logic
`resources/js/Pages/Posts/*.vue`	Vue pages for the Post entity
`AuthenticatedLayout.vue`	Shared layout for authenticated users
`NavLink.vue`	Navigation component with active route
`web.php`	Laravel routes pointing to Inertia pages
`app.blade.php`	Blade view mounting Vue SPA

Optional: Add Styling

Breeze uses Tailwind CSS by default. You can customize your components using Tailwind classes, or enhance them with tools like:

Conclusion

You now have a fully working CRUD application using:

✅ Laravel 12
✅ Inertia.js
✅ Vue 3
✅ Tailwind CSS

This modern stack is ideal for building reactive, SEO-friendly apps that combine server-side simplicity with client-side interactivity.

Souy Soeng

Laravel 12 Inertia.js + Vue.js CRUD Tutorial

Requirements

Step 1: Install Laravel 12

Step 2: Install Laravel Breeze with Inertia.js + Vue

1. Install Breeze

2. Install Inertia Vue stack

3. Install frontend dependencies

4. Migrate default tables

Step 3: Create the Posts Table and Model

1. Generate migration

2. Define the schema

3. Run migration

4. Create Post model

5. Update model

Step 4: Create Post Controller

Step 5: Define Routes

Step 6: Create Vue Pages for CRUD

Create Folder:

🔹 `Index.vue` - List Posts

🔹 `Create.vue` - Create Post

🔹 `Edit.vue` - Edit Post

Step 7: Add Posts to Navigation Menu

Step 8: Open or create `bootstrap/app.php`

Step 9: Replace or add the following full content in `bootstrap/app.php`

Step 10: Run the App

Structure using Laravel + Inertia + Vue:

Laravel Backend (Server-Side)

Routes

Vue + Inertia Frontend (Client-Side)

Views

Public

Database

Summary of Key Files

Optional: Add Styling

Conclusion

Post a Comment

Souy Soeng

Laravel 12 Inertia.js + Vue.js CRUD Tutorial

Requirements

Step 1: Install Laravel 12

Step 2: Install Laravel Breeze with Inertia.js + Vue

1. Install Breeze

2. Install Inertia Vue stack

3. Install frontend dependencies

4. Migrate default tables

Step 3: Create the Posts Table and Model

1. Generate migration

2. Define the schema

3. Run migration

4. Create Post model

5. Update model

Step 4: Create Post Controller

Step 5: Define Routes

Step 6: Create Vue Pages for CRUD

Create Folder:

🔹 Index.vue - List Posts

🔹 Create.vue - Create Post

🔹 Edit.vue - Edit Post

Step 7: Add Posts to Navigation Menu

Step 8: Open or create bootstrap/app.php

Step 9: Replace or add the following full content in bootstrap/app.php

Step 10: Run the App

Structure using Laravel + Inertia + Vue:

Laravel Backend (Server-Side)

Routes

Vue + Inertia Frontend (Client-Side)

Views

Public

Database

Summary of Key Files

Optional: Add Styling

Conclusion

Post a Comment

🔹 `Index.vue` - List Posts

🔹 `Create.vue` - Create Post

🔹 `Edit.vue` - Edit Post

Step 8: Open or create `bootstrap/app.php`

Step 9: Replace or add the following full content in `bootstrap/app.php`