Responses

Creating responses

In your controller, provide both the name of the JavaScript page component, as well as any props (data) for the page.

In this example we're passing a single prop, called event, which contains four attributes (id, title, start_date and description) to the Event/Show page component.

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

To make an Inertia response, use the Inertia render function. This method takes the component name, and allows you to pass props and view data.

To ensure that pages load quickly, only return the minimum data required for the page. Also, be aware that all data returned from the controllers will be visible client-side, so be sure to omit sensitive information.

Lazy evaluation

When using partial reloads it's best to wrap the props (data) in a closure, so that it will only be evaluated if it's required.

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            // Lazily evaluated (only run if required)
            'companies' => function () {
                return Company::orderBy('name')
                    ->get('id', 'name');
            },
            // Evaluated immediately
            'users' => User::orderBy('name')
                ->select('id', 'name')
                ->paginate(),
        ]);
    }
}

Root template data

There are situations where you may want to access your prop data in your root Blade template. For example, you may want to add a meta description tag, Twitter card meta tags, or Facebook Open Graph meta tags.

<meta name="twitter:title" content="{{ $page['props']['event']->title }}">

These props are available via the $page variable.

Sometimes you may even want to provide data that will not be sent to your JavaScript component.

return Inertia::render('Event', ['event' => $event])
    ->withViewData(['meta' => $event->meta]);

Do this using the withViewData() method.

You can then access this variable like a regular template variable.

<meta name="description" content="{{ $meta }}">

Maximum response size

To enable client-side history navigation, all Inertia server responses are stored in the browser's history state. It's good to be aware that some browsers impose a size limit on how much data can be saved there. For example, Firefox has a size limit of 640k characters. This is generally much more than you'll ever need, but it's good to be aware of this when building an Inertia application.

On this page