Inertia.js with Laravel + Vue Setup Guide

laravel, new
January 28, 2025
primaldevsblog_admin

This guide walks through setting up Inertia.js with Laravel and Vue 3

Prerequisites

PHP 8.1 or higher
Node.js and npm
Composer

Creating New Laravel Project
Server-Side Setup
Client-Side Setup
Configuration
Testing the Setup

Creating New Laravel Project

First, create a new Laravel project using composer:

composer create-project laravel/laravel your-project-name
cd your-project-name

Install Vue 3:

npm install vue@latest

Server-Side Setup

1. Install Inertia Laravel Adapter

composer require inertiajs/inertia-laravel

2. Create Root Template

Create a new file at resources/views/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>

3. Install and Configure Middleware

Generate the Inertia middleware:

php artisan inertia:middleware

Add the middleware to your bootstrap/app.php:

use App\Http\Middleware\HandleInertiaRequests;

->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
})

Client-Side Setup

1. Install Inertia Vue Adapter

npm install @inertiajs/vue3

2. Configure Vue and Inertia

Update your resources/js/app.js:

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)
    },
})

3. Install and Configure Vite Vue Plugin

Install the Vite Vue plugin:

npm install @vitejs/plugin-vue

Update your vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue()
    ],
});

Testing the Setup

1. Create a Test Page

Create a new Vue component at resources/js/Pages/Home.vue:

<template>
    <h1>Hello world</h1>
</template>

2. Add Route

Update your routes/web.php:

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home');
});

3. Start Development Servers

Run both Laravel and Vite development servers:

# Terminal 1
php artisan serve

# Terminal 2
npm run dev

Visit http://localhost:8000 to see your application running.

Directory Structure

Your project structure should look like this:

your-project/
├── resources/
│   ├── js/
│   │   ├── Pages/
│   │   │   └── Home.vue
│   │   └── app.js
│   └── views/
│       └── app.blade.php
├── routes/
│   └── web.php
├── package.json
└── vite.config.js

Blog Details