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

# Flash Data

<Warning>You are viewing the documentation for Inertia.js v2. Inertia.js v3 has been released and is now the default version. Please visit the [upgrade guide](/v3/getting-started/upgrade-guide) to get started.</Warning>

<Badge>v2.3.3+</Badge>

Sometimes you may wish to send one-time data to your frontend that shouldn't reappear when users navigate through browser history. Unlike regular props, flash data isn't persisted in history state, making it ideal for success messages, newly created IDs, or other temporary values.

## Flashing Data

You may flash data using the `Inertia::flash()` method, passing a key and value or an array of key-value pairs.

```php theme={null}
public function store(Request $request)
{
    $user = User::create($request->validated());

    Inertia::flash('message', 'User created successfully!');

    // Or flash multiple values at once...
    Inertia::flash([
        'message' => 'User created!',
        'newUserId' => $user->id,
    ]);

    return back();
}
```

Chaining with `back()` is also supported.

```php theme={null}
return Inertia::flash('newUserId', $user->id)->back();
```

You may also chain `flash()` onto `render()`, or vice versa.

```php theme={null}
return Inertia::render('Projects/Index', [
    'projects' => $projects,
])->flash('highlight', $project->id);

// Or...

return Inertia::flash('highlight', $project->id)
    ->render('Projects/Index', ['projects' => $projects]);
```

Flash data is scoped to the current request. The middleware automatically persists it to the session when redirecting. After the flash data is sent to the client, it is cleared and will not appear in subsequent requests.

## Accessing Flash Data

Flash data is available on `page.flash`. You may also listen for the global `flash` event or use the `onFlash` callback.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { usePage } from '@inertiajs/vue3'

  const page = usePage()
  </script>

  <template>
      <div v-if="page.flash.toast" class="toast">
          {{ page.flash.toast.message }}
      </div>
  </template>
  ```

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

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

      return (
          <>
              {flash.toast && <div className="toast">{flash.toast.message}</div>}
              {children}
          </>
      )
  }
  ```

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

  {#if $page.flash.toast}
      <div class="toast">{$page.flash.toast.message}</div>
  {/if}
  ```
</CodeGroup>

## The onFlash Callback

You may use the `onFlash` callback to handle flash data when making requests.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue3'

  router.post('/users', data, {
      onFlash: ({ newUserId }) => {
          form.userId = newUserId
      },
  })
  ```

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

  router.post('/users', data, {
      onFlash: ({ newUserId }) => {
          form.userId = newUserId
      },
  })
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from '@inertiajs/svelte'

  router.post('/users', data, {
      onFlash: ({ newUserId }) => {
          form.userId = newUserId
      },
  })
  ```
</CodeGroup>

## Global Flash Event

You may use the global `flash` event to handle flash data in a central location, such as a layout component. For more information on events, see the [events documentation](/v2/advanced/events).

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue3'

  router.on('flash', (event) => {
      if (event.detail.flash.toast) {
          showToast(event.detail.flash.toast)
      }
  })
  ```

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

  router.on('flash', (event) => {
      if (event.detail.flash.toast) {
          showToast(event.detail.flash.toast)
      }
  })
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from '@inertiajs/svelte'

  router.on('flash', (event) => {
      if (event.detail.flash.toast) {
          showToast(event.detail.flash.toast)
      }
  })
  ```
</CodeGroup>

<Warning>
  Event listeners registered inside components should be cleaned up when the component unmounts to prevent them from accumulating and firing multiple times. This is especially important in non-persistent layouts. See [removing event listeners](/v2/advanced/events#removing-listeners) for more information.
</Warning>

Native browser events are also supported.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  document.addEventListener('inertia:flash', (event) => {
      console.log(event.detail.flash)
  })
  ```

  ```js React icon="react" theme={null}
  document.addEventListener('inertia:flash', (event) => {
      console.log(event.detail.flash)
  })
  ```

  ```js Svelte icon="s" theme={null}
  document.addEventListener('inertia:flash', (event) => {
      console.log(event.detail.flash)
  })
  ```
</CodeGroup>

The `flash` event is not cancelable and fires on every response that carries flash data.

## Client-Side Flash

You may set flash data on the client without a server request using the `router.flash()` method. Values are merged with existing flash data.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue3'

  router.flash('foo', 'bar')
  router.flash({ foo: 'bar' })
  ```

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

  router.flash('foo', 'bar')
  router.flash({ foo: 'bar' })
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from '@inertiajs/svelte'

  router.flash('foo', 'bar')
  router.flash({ foo: 'bar' })
  ```
</CodeGroup>

A callback may also be passed to access the current flash data or replace it entirely.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from '@inertiajs/vue3'

  router.flash((current) => ({ ...current, bar: 'baz' }))
  router.flash(() => ({}))
  ```

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

  router.flash((current) => ({ ...current, bar: 'baz' }))
  router.flash(() => ({}))
  ```

  ```js Svelte icon="s" theme={null}
  import { router } from '@inertiajs/svelte'

  router.flash((current) => ({ ...current, bar: 'baz' }))
  router.flash(() => ({}))
  ```
</CodeGroup>

## TypeScript

You may configure the flash data type globally using [TypeScript's declaration merging](/v2/advanced/typescript#flash-data).

## Testing

For information on testing flash data, see the [testing documentation](/v2/advanced/testing#testing-flash-data).