Clone and Customize Laravel Backend with Vue Frontend

Laravel 12 + Vue.js 3 + Inertia.js CRUD is a modern Single Page Application (SPA) that combines the power of Laravel on the backend and Vue 3 on the frontend, using Inertia.js to bridge them without needing a separate API.

It provides full CRUD (Create, Read, Update, Delete) functionality, ideal for learning or starting modern web apps using Laravel and Vue.

Requirements (Development Environment)

• PHP ≥ 8.2

• Composer

• Node.js & npm

• MySQL

• Laravel CLI (optional)

1️⃣ . Clone the project

git clone https://github.com/StarCodeKh/Laravel-12-Inertia.js-Vue.js-CRUD.git

2️⃣ . Move into the project folder

cd Laravel-12-Inertia.js-Vue.js-CRUD

3️⃣ . Install PHP dependencies

composer install

4️⃣ . Copy the .env file

cp .env.example .env

5️⃣ . Generate the app key

php artisan key:generate

6️⃣ . Configure the database in .env

Open .env and edit:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_crud
DB_USERNAME=root
DB_PASSWORD=

7️⃣ . Run migrations

php artisan migrate

8️⃣ . Install JavaScript dependencies

npm install

9️⃣ . Build frontend assets

npm run dev

🔟 . Serve the application

php artisan serve

Then visit:

http://127.0.0.1:8000

Summary

This guide helps you quickly set up a complete Laravel 12 + Vue.js 3 + Inertia.js CRUD application. It covers cloning the project, configuring your environment, installing dependencies, running migrations, and launching the development server.