Shared data

Sometimes you need to access certain data on numerous pages within your application. For example, a common use-case for this is showing the current user in the site header. Passing this data manually in each response isn't practical. In these situations shared data can be useful.

Sharing data

The server-side adapters provide a way to preassign shared data for each request. This is typically done outside of your controllers. Shared data will be automatically merged with the page props provided in your controller.

// Synchronously
Inertia::share('app.name', Config::get('app.name'));

// Lazily
Inertia::share('auth.user', function () {
    if (Auth::user()) {
        return [
            'id' => Auth::user()->id,
            'first_name' => Auth::user()->first_name,
            'last_name' => Auth::user()->last_name,
        ];
    }
});

// Multiple values
Inertia::share([
    // Synchronously
    'app' => [
        'name' => Config::get('app.name')
    ],
    // Lazily
    'auth' => function () {
        return [
            'user' => Auth::user() ? [
                'id' => Auth::user()->id,
                'first_name' => Auth::user()->first_name,
                'last_name' => Auth::user()->last_name,
            ] : null
        ];
    }
]);
Place this code in your AppServiceProvider boot method.
Use this feature sparingly as shared data is included with every response.
Page props and shared data are merged together, so be sure to namespace your shared data appropriately.

Accessing shared data

Once you've shared the data server-side, you'll then be able to access it within your page components as props. Shared data can even be accessed in non-page components, although not as props in those cases. Here's an example of how to do this in a layout component.

<template>
  <main>
    <header>
      <div>You are logged in as: {{ $page.auth.user.name }}</div>
      <nav>
        <inertia-link href="/">Home</inertia-link>
        <inertia-link href="/about">About</inertia-link>
        <inertia-link href="/contact">Contact</inertia-link>
      </nav>
    </header>
    <content>
      <slot />
    </content>
    <footer></footer>
  </main>
</template>
Access shared data using the $page property.

Flash messages

Another great use-case for shared data is flash messages. These are messages stored in the session only for the next request. You'll often set a flash message after completing a task and before redirecting to a different page.

Here's a simple way to implement flash messages in your Inertia applications. First, share the flash message on each request.

use Session;
use Inertia\Inertia;

Inertia::share('flash', function () {
    return [
        'message' => Session::get('message'),
    ];
});
Place this code in your AppServiceProvider boot method.

Next, display the flash message in a front-end component, such as the site layout.

<template>
  <main>
    <header></header>
    <content>
      <div v-if="$page.flash.message" class="alert">
        {{ $page.flash.message }}
      </div>
      <slot />
    </content>
    <footer></footer>
  </main>
</template>