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 @温德尔阿德里尔 。

# 工作原理

# 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:

惯性
::
闪光
（
'toast'
，[
'类型'

=>

'成功'
,
'信息'

=>

__
（
'Profile updated.'
)]);
返回

到路线
（
'profile.edit'
（英文）：

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

进口
{ router }
从

'@inertiajs/react'
;
进口
{ useEffect }
从

'react'
;
进口
{ toast }
从

'sonner'
;
进口

类型
{ FlashToast }
从

'@/types/ui'
;
出口

功能

useFlashToast
（）
:

空白
{

使用效果
(()
=>
{

返回
路由器。
在
（
'flash'
，（
事件
）
=>
{

常量

闪光

=
(event
作为

CustomEvent
).detail?.flash;

常量

数据

=
flash?.toast
作为

FlashToast

|

不明确的
;

如果
（
！
data) {

返回
;
}
toast[data.type](data.message);
});
}, []);
}

这 FlashToast type supports four variants — success , info , warning ， 和 error — giving you control over how notifications appear:

出口

类型

FlashToast

=
{

类型
:

'成功'

|

'信息'

|

'警告'

|

'错误'
;

信息
:

细绳
;
};

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() 直接地：

使用

Flux\Flux
;
Flux
::
吐司
（
variant
:
'成功'
,
文本
:
__
（
'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.

# 参考

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