Laravel Starter Kits Now Include Toast Notifications

All four official Laravel starter kits now include toast notifications out of the box. The update replaces the previous inline action messages with a consistent notification pattern across every stack. The feature was contributed by @WendellAdriel.

#How It Works

#Inertia Stacks (React, Vue, Svelte)

The Inertia-based kits use a new Inertia::flash() call on the server side to pass toast data to the frontend:

Inertia::flash('toast', ['type' => 'success', 'message' => __('Profile updated.')]);
 
return to_route('profile.edit');

On the frontend, a useFlashToast hook listens for Inertia's flash event and triggers a Sonner toast. Here's the React implementation:

import { router } from '@inertiajs/react';
import { useEffect } from 'react';
import { toast } from 'sonner';
import type { FlashToast } from '@/types/ui';
 
export function useFlashToast(): void {
    useEffect(() => {
        return router.on('flash', (event) => {
            const flash = (event as CustomEvent).detail?.flash;
            const data = flash?.toast as FlashToast | undefined;
 
            if (!data) {
                return;
            }
 
            toast[data.type](data.message);
        });
    }, []);
}

The FlashToast type supports four variants — success, info, warning, and error — giving you control over how notifications appear:

export type FlashToast = {
    type: 'success' | 'info' | 'warning' | 'error';
    message: string;
};

A <Toaster /> component wraps Sonner and is mounted at the app level, so toasts work on any page without additional setup.

#Livewire Stack

The Livewire kit uses Flux's built-in toast component. Instead of dispatching browser events and relying on inline <x-action-message> components, you call Flux::toast() directly:

use Flux\Flux;
 
Flux::toast(variant: 'success', text: __('Profile updated.'));

Each layout file includes a persisted toast group so notifications survive Livewire re-renders:

@persist('toast')
    <flux:toast.group>
        <flux:toast />
    </flux:toast.group>
@endpersist

This replaces the previous <x-action-message> component, which displayed a temporary "Saved." message inline next to the save button.

#What Changed

The toast notifications are wired up for profile updates, password changes, and email verification across all four kits. The settings controllers now flash toast data instead of relying on session status messages or Livewire event dispatches.

To add toasts to your own actions, use Inertia::flash() for the Inertia stacks or Flux::toast() for Livewire — the frontend plumbing is already in place.

Each Inertia stack uses a framework-specific Sonner port — sonner for React, vue-sonner for Vue, and svelte-sonner for Svelte — while the Livewire kit uses Flux toast components.

#References

• React starter kit commit
• Vue starter kit commit
• Svelte starter kit commit
• Livewire starter kit commit