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.