Skip to main content

Documentation Index

Fetch the complete documentation index at: https://inertiajs.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

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

1

Install dependencies

First, install the Inertia server-side adapter using the Composer package manager.
composer require inertiajs/inertia-laravel
2

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. Inertia provides Blade components for rendering the head and body content.
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')
        <x-inertia::head />
    </head>
    <body>
        <x-inertia::app />
    </body>
</html>
For React applications, it’s recommended to include the @viteReactRefresh directive before the @vite directive to enable Fast Refresh in development.The <x-inertia::app> component 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 component.
<x-inertia::app id="custom-app-id" />
If you change the id of the root element, be sure to update it client-side as well.The <x-inertia::head> component also accepts fallback content via its slot for managing head elements when SSR is not active.By default, Inertia’s Laravel adapter will assume your root template is named app.blade.php. You may change this using the Inertia::setRootView() method.
3

Register middleware

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.
4

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

​
Blade Directives

Prior to v3, Inertia used @inertiaHead and @inertia Blade directives to render head and body content. These directives are still supported but do not offer SSR head fallback content. The Blade components above are recommended for new applications.
resources/views/app.blade.php
<html>
    <head>
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>
You may customize the root element id by passing a value to the directive: @inertia('custom-app-id').