Server-Side Setup

You are viewing the documentation for Inertia.js v2. Inertia.js v3 has been released and is now the default version. Please visit the upgrade guide to get started.

The first step when installing Inertia is to configure your server-side framework. Inertia maintains an official server-side adapter for Laravel. For other frameworks, please see the community adapters. Inertia is fine-tuned for Laravel, so the documentation examples on this website utilize Laravel. For examples of using Inertia with other server-side frameworks, please refer to the framework specific documentation maintained by that adapter.

Laravel Starter Kits

Laravel’s starter kits provide out-of-the-box scaffolding for new Inertia applications.These starter kits are the absolute fastest way to start building a new Inertia project using Laravel and Vue or React. However, if you would like to manually install Inertia into your application, please consult the documentation below.

Installation

Install dependencies

First, install the Inertia server-side adapter using the Composer package manager.

composer require inertiajs/inertia-laravel

Setup root template

Next, create a resources/views/app.blade.php file. This root template will be loaded on the first page visit to your application, and should include your assets along with the @inertia and @inertiaHead directives.

resources/views/app.blade.php

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

For React applications, it’s recommended to include the @viteReactRefresh directive before the @vite directive to enable Fast Refresh in development.The @inertia directive renders a <div> element with an id of app. This element serves as the mounting point for your JavaScript application. You may customize the id by passing a different value to the directive.

<html>
    ...
    <body>
        @inertia('custom-app-id')
    </body>
</html>

If you change the id of the root element, be sure to update it client-side as well.By default, Inertia’s Laravel adapter will assume your root template is named app.blade.php. If you would like to use a different root view, you can change it using the Inertia::setRootView() method.

Next we need to setup the Inertia middleware. You can accomplish this by publishing the HandleInertiaRequests middleware to your application, which can be done using the following Artisan command.

php artisan inertia:middleware

Once the middleware has been published, append the HandleInertiaRequests middleware to the web middleware group in your application’s bootstrap/app.php file.

use App\Http\Middleware\HandleInertiaRequests;

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

This middleware provides a version() method for setting your asset version, as well as a share() method for defining shared data.

Create your first response

That’s it, you’re all ready to go server-side! Now you’re ready to start creating Inertia pages and rendering them via responses.

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',
            ),
        ]);
    }
}

Getting Started

Installation

Core Concepts

The Basics

Data & Props

Security

Advanced

Laravel Starter Kits

Installation

Laravel Starter Kits

​Installation

Installation