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

# Shared Data

<Warning>This is documentation for Inertia.js v1, which is no longer actively maintained. Please refer to the [v3 docs](/v3/getting-started/index).</Warning>

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.

## Sharing 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](/server-side-setup#middleware).

```php theme={null}
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.

```php theme={null}
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.

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

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  <template>
      <main>
          <header>
              You are logged in as: {{ user.name }}
          </header>
          <article>
              <slot />
          </article>
      </main>
  </template>

  <script>
  export default {
      computed: {
          user() {
              return this.$page.props.auth.user
          }
      }
  }
  </script>
  ```

  ```vue Vue 3 icon="vuejs" theme={null}
  <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>
  ```

  ```jsx React icon="react" theme={null}
  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>
      )
  }
  ```

  ```html Svelte icon="s" theme={null}
  <script>
      import { page } from '@inertiajs/svelte'
  </script>

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

## Flash Messages

Another great use-case for shared data is flash messages. These are messages stored in the session only for the next request. For example, it's common to 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.

```php theme={null}
class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'flash' => [
                'message' => fn () => $request->session()->get('message')
            ],
        ]);
    }
}
```

Next, display the flash message in a frontend component, such as the site layout.

<CodeGroup>
  ```vue Vue 2 icon="vuejs" theme={null}
  <template>
      <main>
          <header></header>
          <article>
              <div v-if="$page.props.flash.message" class="alert">
                  {{ $page.props.flash.message }}
              </div>
              <slot />
          </article>
          <footer></footer>
      </main>
  </template>
  ```

  ```vue Vue 3 icon="vuejs" theme={null}
  <template>
      <main>
          <header></header>
          <article>
              <div v-if="$page.props.flash.message" class="alert">
                  {{ $page.props.flash.message }}
              </div>
              <slot />
          </article>
          <footer></footer>
      </main>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { usePage } from '@inertiajs/react'

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

      return (
          <main>
              <header></header>
              <article>
                  {flash.message && (
                      <div class="alert">{flash.message}</div>
                  )}
                  {children}
              </article>
              <footer></footer>
          </main>
      )
  }
  ```

  ```html Svelte icon="s" theme={null}
  <script>
      import { page } from '@inertiajs/svelte'
  </script>

  <main>
      <header></header>
      <article>
          {#if $page.props.flash.message}
              <div class="alert">{$page.props.flash.message}</div>
          {/if}
          <slot />
      </article>
      <footer></footer>
  </main>
  ```
</CodeGroup>