Shared Data

Sometimes you need to access specific pieces of data on numerous pages within your application. For example, you may need to display the current user in the site header. Passing this data manually in each response across your entire application is cumbersome. Thankfully, there is a better option: shared data.

Inertia’s server-side adapters all provide a method of making shared data available for every request. This is typically done outside of your controllers. Shared data will be automatically merged with the page props provided in your controller.

In Laravel applications, this is typically handled by the HandleInertiaRequests middleware that is automatically installed when installing the server-side adapter.

using InertiaCore;

// Register shared data once at startup...
Inertia.Share("appName", builder.Configuration["AppName"]);

// ...or resolve per-request inside middleware, using Inertia.Lazy
// so the value is only evaluated when needed.
app.Use(async (context, next) =>
{
    Inertia.Share("auth.user", Inertia.Lazy(() => context.User.Identity?.IsAuthenticated == true
        ? new { Name = context.User.Identity.Name }
        : null));

    await next();
});

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            // Synchronously...
            'appName' => config('app.name'),

            // Lazily...
            'auth.user' => fn () => $request->user()
                ? $request->user()->only('id', 'name', 'email')
                : null,
        ]);
    }
}

Alternatively, you can manually share data using the Inertia::share method.

using InertiaCore;

// Synchronously...
Inertia.Share("appName", "My App");

// Using a dictionary...
Inertia.Share(new Dictionary<string, object?> {
    ["appName"] = "My App",
    ["user"] = currentUser,
});

use Inertia\Inertia;

// Synchronously...
Inertia::share('appName', config('app.name'));

// Lazily...
Inertia::share('user', fn (Request $request) => $request->user()
    ? $request->user()->only('id', 'name', 'email')
    : null
);

Shared data should be used sparingly as all shared data is included with every response.

Page props and shared data are merged together, so be sure to namespace your shared data appropriately to avoid collisions.

You may share data that is resolved only once and remembered by the client across subsequent navigations using once props.

using InertiaCore;

// Share a once prop using Inertia.Share with Inertia.Once
Inertia.Share("countries", Inertia.Once(() => _context.Countries.ToList()));

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'countries' => Inertia::once(fn () => Country::all()),
        ]);
    }
}

Alternatively, you may define a dedicated shareOnce() method in the middleware. The middleware will evaluate both share() and shareOnce(), merging the results.

using InertiaCore;

// In .NET, call Inertia.ShareOnce to register a once prop by key.
Inertia.ShareOnce("countries", () => _context.Countries.ToList());

class HandleInertiaRequests extends Middleware
{
    public function shareOnce(Request $request): array
    {
        return array_merge(parent::shareOnce($request), [
            'countries' => fn () => Country::all(),
        ]);
    }
}

You may also share once props manually using the Inertia::shareOnce() method.

Inertia.ShareOnce("countries", () => _context.Countries.ToList());

Accessing Shared Data

Once you have shared the data server-side, you will be able to access it within any of your pages or components. Here’s an example of how to access shared data in a layout component.

<script setup>
import { computed } from "vue";
import { usePage } from "@inertiajs/vue3";

const page = usePage();

const user = computed(() => page.props.auth.user);
</script>

<template>
  <main>
    <header>You are logged in as: {{ user.name }}</header>
    <article>
      <slot />
    </article>
  </main>
</template>

import { usePage } from "@inertiajs/react";

export default function Layout({ children }) {
  const { auth } = usePage().props;

  return (
    <main>
      <header>You are logged in as: {auth.user.name}</header>
      <article>{children}</article>
    </main>
  );
}

<script>
    import { page } from '@inertiajs/svelte'
</script>

<main>
    <header>
        You are logged in as: {$page.props.auth.user.name}
    </header>
    <article>
        <slot />
    </article>
</main>

TypeScript

You may configure the shared props type globally using TypeScript’s declaration merging.

Flash Data

For one-time notifications like toast messages or success alerts, you may use flash data. Unlike shared data, flash data is not persisted in the browser’s history state, so it won’t reappear when navigating through history.

Shared Data

Sharing Data

Sharing Once Props

Accessing Shared Data

TypeScript

Flash Data