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'),
]);
// Alternatively, you can use the inertia() helper
return inertia('Event/Show', [
'event' => $event->only('id', 'title', 'start_date', 'description'),
]);
}
}
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 }}">
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]);
You can then access this variable like a regular template variable.
<meta name="description" content="{{ $meta }}">
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 (and throws a NS_ERROR_ILLEGAL_VALUE
error if you exceed it). This is generally much more than you'll ever need, but it's good to be aware of this when building an Inertia application.