Flash Data

Flash data lets you send one-time data to your frontend that won’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 IActionResult Store([FromBody] CreateUserRequest request)
{
    var user = _context.Users.Add(new User { /* ... */ }).Entity;
    _context.SaveChanges();

    Inertia.Flash("message", "User created successfully!");

    // Or flash multiple values at once...
    Inertia.Flash(new Dictionary<string, object?>
    {
        ["message"] = "User created!",
        ["newUserId"] = user.Id,
    });

    return Inertia.Back();
}

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.

Inertia.Flash("newUserId", user.Id);
return Inertia.Back();

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

return Inertia.Render("Projects/Index", new
{
    Projects = projects,
}).Flash("highlight", project.Id);

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>

import { usePage } from "@inertiajs/react";

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

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

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);
  }
});

Native browser events are also supported.

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

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" });

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.

Testing

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