Laravel 12 Inertia.js + Vue.js CRUD Tutorial (for Beginners)
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.
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:
Open .env
file and update the DB settings:
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
Edit the generated file in database/migrations
:
3. Run migration
4. Create Post model
5. Update model
Step 4: Create Post Controller
Then update app/Http/Controllers/PostController.php
:
Step 5: Define Routes
Open routes/web.php
and add:
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
Open resources/js/Layouts/AuthenticatedLayout.vue
, and inside your navigation area:
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
Step 10: Run the App
Start Laravel and the Vite dev server:
Visit: http://localhost:8000/posts
Structure using Laravel + Inertia + Vue:
Laravel Backend (Server-Side)
Routes
Vue + Inertia Frontend (Client-Side)
Views
Public
Database
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.