Option 1: Basic Flash Message with Inertia (Built-In)
Simple. Clean. No dependencies.
AppServiceProvider.phpAdd flash sharing in boot() method:
use Inertia\Inertia;
public function boot()
{
Inertia::share([
'flash' => fn () => [
'success' => session('success'),
'error' => session('error'),
'info' => session('info'),
],
]);
}AppLayout.vue or a dedicated FlashMessage.vueCreate a simple component like this:
<!-- resources/js/components/FlashMessage.vue -->
<script setup lang="ts">
import { usePage } from '@inertiajs/vue3';
import { computed } from 'vue';
const flash = computed(() => usePage().props.flash);
</script>
<template>
<div class="space-y-2 mb-4">
<div v-if="flash.success" class="rounded bg-green-100 px-4 py-2 text-green-700 shadow">
{{ flash.success }}
</div>
<div v-if="flash.error" class="rounded bg-red-100 px-4 py-2 text-red-700 shadow">
{{ flash.error }}
</div>
<div v-if="flash.info" class="rounded bg-blue-100 px-4 py-2 text-blue-700 shadow">
{{ flash.info }}
</div>
</div>
</template>Then import it in AppLayout.vue or Index.vue:
<FlashMessage />This will show flash messages directly and instantly — great for simple apps.
vue-toastificationWant to impress users (or your manager 😏)? Toasts are sleek and non-blocking!
Install Toastification
npm install vue-toastificationIn resources/js/app.ts or main.ts:
import Toast, { useToast } from 'vue-toastification';
import 'vue-toastification/dist/index.css';
app.use(Toast);In AppLayout.vue (or a global component):
import { watch } from 'vue';
import { usePage } from '@inertiajs/vue3';
import { useToast } from 'vue-toastification';
const page = usePage();
const toast = useToast();
watch(
() => page.props.flash,
(flash) => {
if (flash?.success) toast.success(flash.success);
if (flash?.error) toast.error(flash.error);
if (flash?.info) toast.info(flash.info);
},
{ immediate: true }
);You can even customize duration, theme, position, etc.
Subscribe to get the latest posts sent to your email.