Skip to main content
Flash data lets you send one-time data to the frontend. Unlike regular props, flash data isn’t persisted in browser history state, so it won’t reappear when navigating through history.

​
Flashing Data

You may flash data using the Inertia::flash() method. 
public function store(Request $request)
{
    $user = User::create($request->validated());

    Inertia::flash('toast', [
        'type' => 'success',
        'message' => 'User created successfully!',
    ]);

    return back();
}
You may chain back() directly onto the flash() call. 
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. When redirecting, the middleware automatically persists it to the session.

​
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 visits. 
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);
  }
});
You may also use native browser events. 
document.addEventListener("inertia:flash", (event) => {
  console.log(event.detail.flash);
});
The flash event is not cancelable.

​
Client-Side Flash

You may set flash data on the client without a server request using the router.flash() method. 
import { router } from "@inertiajs/vue3";

router.flash("foo", "bar");
router.flash({ foo: "bar" });

// Use existing flash data...
router.flash((current) => ({ ...current, bar: "baz" }));