Flash Data#

Send one-time messages that disappear after display.

See also

Official Inertia.js docs: Flash Data

What Is Flash Data?#

Flash data is short-lived state (like success or error messages) that is only meant to be displayed once. Flash messages are removed after they are read, so they do not persist in browser history state.

Backend Usage#

Use the flash() helper to queue messages for the next Inertia response:

from litestar import post
from litestar.request import Request
from litestar_vite.inertia import flash, InertiaRedirect

@post("/users")
async def create_user(request: Request, data: UserCreate) -> InertiaRedirect:
    user = await User.create(**data.dict())
    flash(request, "User created successfully!", "success")
    return InertiaRedirect(request, f"/users/{user.id}")

Flash categories are grouped under their category name (success, error, warning, info). Each category contains a list of messages.

Note

Litestar’s FlashPlugin is optional. If it is already configured, its session-backed messages work with Inertia too.

Frontend Usage#

Flash data is available on the page object:

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

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

  return (
    <div>
      {flash.success?.map((message) => (
        <div key={message} className="alert alert-success">
          {message}
        </div>
      ))}
      {children}
    </div>
  );
}

<script setup lang="ts">
import { usePage } from "@inertiajs/vue3";

const { flash } = usePage();
</script>

<template>
  <div>
    <div
      v-for="message in flash.success || []"
      :key="message"
      class="alert alert-success"
    >
      {{ message }}
    </div>
    <slot />
  </div>
</template>

Client-Side Flash Messages#

You can also set flash data on the client without a server round trip:

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

router.flash((current) => ({
  ...current,
  info: ["Profile updated"],
}));

import { router } from "@inertiajs/vue3";

router.flash((current) => ({
  ...current,
  info: ["Profile updated"],
}));

Typing Flash Data#

Add custom types for flash data in TypeScript:

declare module "@inertiajs/core" {
  interface Page {
    flash: {
      success?: string[];
      error?: string[];
      warning?: string[];
      info?: string[];
    };
  }
}

See Also#