Setup Laravel 12 Inertia & Vue3 Tutorial with Example – Step-by-Step Guide
This step-by-step guide covers setting up Laravel 12 with Inertia.js and Vue 3. Learn how to integrate Inertia.js, configure Vue 3 as the frontend, and optimize development with Vite to build a modern, dynamic, and efficient Laravel application
This guide provides a step-by-step tutorial on setting up Laravel with Inertia.js and Vue 3. By following these steps, you'll learn how to integrate Inertia.js into your Laravel application, configure Vue 3 as the frontend framework, and set up Vite for an optimized development experience.
Steps Overview
- Create a Fresh Laravel Project – Install Laravel and set up the project structure.
- Install and Configure Inertia.js in Laravel (Server-Side) – Install Inertia’s Laravel adapter and configure middleware.
- Set Up Inertia.js in Vue (Client-Side) – Install the Vue 3 adapter and initialize the Inertia app.
- Setup Vue in Laravel with Vite – Configure Vue.js with Vite for optimal performance.
- Create Your First Vue Page – Replace Blade templates with Vue-powered pages.
- Define Laravel Routes for Inertia Pages – Set up routes to serve Vue pages using Inertia.
By following this guide, you can build a modern single-page application (SPA) using Laravel as the backend and Vue.js as the frontend framework. Let’s dive in!
Step 1: Create a Fresh Laravel Project
Start by creating a new Laravel project without using a starter kit.
composer create-project "laravel/laravel:^12.0" inertia-demoAlternatively, if you already have a fresh Laravel project:
cd inertia-demo
npm install && npm run build
composer run devFor more details, visit the official Laravel installation guide: Laravel Installation.
Step 2: Setup Inertia in Laravel (Server Side)
Install Inertia’s Laravel adapter using Composer:
composer require inertiajs/inertia-laravelConfigure the Root Template
Next let's configure the root template. It's the main Blade template that Inertia will use to render the Vue app. By default it's assumed the file is called app.blade.php.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite('resources/js/app.js')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>By default, Inertia assumes your root template is app.blade.php. If you prefer another file, update it using:
Inertia::setRootView('your_custom_view');Inside the file you need to add 3 directives:
- @vite to add your app source JavaScript file
- @inertiaHead to add all Inertia scripts
- @inertia that let's Inertia render the Vue application
Setup Inertia.js Middleware
Publish the HandleInertiaRequests middleware using:
php artisan inertia:middlewareThen, append it to the web middleware group in bootstrap/app.php:
use App\Http\Middleware\HandleInertiaRequests;
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})For a detailed setup guide, visit: Inertia Server-Side Setup.
Step 3: Setup Inertia on Vuejs (Client Side)
Install the Vue 3 adapter for Inertia:
npm install @inertiajs/vue3Initialize the Inertia App
Update your resources/js/app.js file to initialize Inertia:
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
return pages[`./Pages/${name}.vue`];
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el);
},
});By default, Inertia assumes that your application's root template has a root element with an id of app.
If your root element has a different ID, you can specify it using the id property:
createInertiaApp({
id: 'my-custom-app',
// ...
})But, one thing that is missing in document is:
Ensure your main Blade file (resources/views/app.blade.php) defines the correct root element ID:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite('resources/js/app.js')
@inertiaHead
</head>
<body>
@inertia('my-custom-app')
</body>
</html>
For more details, refer to: Inertia Client-Side Setup.
Step 4: Setup Vue in Laravel with Vite
If you are using Vite in Laravel, install the Vue plugin:
npm install --save-dev @vitejs/plugin-vueThen, update vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel(['resources/js/app.js']),
vue({
template: {
transformAssetUrls: {
// The Vue plugin will re-write asset URLs, when referenced
// in Single File Components, to point to the Laravel web
// server. Setting this to `null` allows the Laravel plugin
// to instead re-write asset URLs to point to the Vite
// server instead.
base: null,
// The Vue plugin will parse absolute URLs and treat them
// as absolute paths to files on disk. Setting this to
// `false` will leave absolute URLs un-touched so they can
// reference assets in the public directory as expected.
includeAbsolute: false,
},
},
}),
],
});For official documentation, visit: Laravel Vite Vue.
Step 5: Create Your First Vue Page
Next, let's start adding pages powered by Vue from now now, instead of Blade. You can pass the data to that Vue pages the same way as you were passing the data to blade templates.
Create a new file in resources/js/Pages/home.vue:
<script setup>
</script>
<template>
<h1>Welcome to our Webpage</h1>
</template>
<style scoped>
</style>Step 6: Create Routes
Adding a Laravel route that will render a Vue page
Add the following route to routes/web.php file.
Define a basic route in routes/web.php to render your first Vue page:
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
Route::get('/', function () {
return Inertia::render('home');
});Creating Inertia Responses from Controller
Also, you can create controllers that return Inertia responses from there as well.
Example with pass some date to vue page from controller via inertia:
use Inertia\Inertia;
class EventsController extends Controller
{
public function show(Event $event)
{
return Inertia::render('Event/Show', [
'event' => $event->only('id', 'title', 'start_date', 'description'),
]);
}
}Step 7: Run Your Application
To run the app locally, run php artisan serve to start Laravel and npm run dev in another terminal tab, to start the Vite local dev server. Then navigate to the URL displayed when you ran php artisan serve. You should see the counter ticking!
✅ Now that your Laravel + Inertia + Vue 3 setup is ready, you can move on to building a full-featured CRUD system.
Conclusion
You have successfully set up Laravel, Vue.js, and Inertia.js from scratch! This setup allows you to build a modern SPA while leveraging Laravel's robust backend. From here, you can expand your application by adding more pages, authentication, and database interactions.
Let me know in the comments if you have any questions!
You have successfully set up Laravel, Vue.js, and Inertia.js from scratch! This setup allows you to build modern SPAs while leveraging Laravel's powerful backend. Next, you can expand your app by adding more pages, authentication, and database interactions.
If you found this guide helpful, share it with others and supporting up by Like this Page if you have any questions fill free to contact us!