Skip to main content
v2.3.3+ 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. 
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. 
return Inertia::flash('newUserId', $user->id)->back();
You may also chain flash() onto render(), or vice versa. 
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. 
<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>

​
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
    },
})

​
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)
    }
})
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 for more information.
Native browser events are also supported. 
document.addEventListener('inertia:flash', (event) => {
    console.log(event.detail.flash)
})
The flash event is not cancelable. During partial reloads, it only fires if the flash data has changed.

​
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' })
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(() => ({}))

​
TypeScript

You may configure the flash data type globally using TypeScript’s declaration merging. 
// global.d.ts
declare module '@inertiajs/core' {
    export interface InertiaConfig {
        flashDataType: {
            toast?: {
                type: 'success' | 'error'
                message: string
            }
        }
    }
}
With this configuration, page.flash.toast will be properly typed as { type: "success" | "error"; message: string } | undefined.