Flash Data - Inertiajs

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

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

return Inertia::flash('newUserId', $user->id)->back();

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

php

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.

vue

<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

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

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

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

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.

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

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.

document.addEventListener('inertia:flash', (event) => {
    console.log(event.detail.flash)
})

document.addEventListener('inertia:flash', (event) => {
    console.log(event.detail.flash)
})

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.

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

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.

import { router } from '@inertiajs/vue3'

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

import { router } from '@inertiajs/react'

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

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.

Testing

For information on testing flash data, see the testing documentation.