Toast

Toast is a container component that holds Alert notification components. It can be positioned at different locations on the screen and is ideal for displaying non-intrusive messages.

Toast is powered by the useToast composable, which provides a flexible, channel-based toast notification system.

Basic Usage

The simplest way to use the Toast component is to place it in your layout with notification content inside. By default, it will appear at the bottom right of the screen. This example also limits the number of visible toasts to 3 and queues the rest.

Code Example

Basic.vue

Components

The Toast components include the following:

Toast - Container for toast notifications with channel and alignment support.
useToast - Composable for global toast notification management with channel support.
clearAllToastQueues - Clears all toast queues for all channels.

Toast

The Toast component is a flexible container for displaying notification toasts. It receives toasts from the useToast composable and renders each toast using its default slot. The component supports named channels (via the name prop), customizable default settings for each channel, and a full range of horizontal and vertical alignment options. Each toast is passed to the slot with its data and a removeToast callback for dismissal.

Toast Props	Type	Description
hAlign	'start' \| 'center' \| 'end'	Horizontal alignment for the toast container. Accepts 'start', 'center', or 'end'.
start	boolean	Set hAlign to start.
center	boolean	Set hAlign to center.
end	boolean	Set hAlign to end.
vAlign	'top' \| 'middle' \| 'bottom'	Vertical alignment for the toast container. Accepts 'top', 'middle', or 'bottom'.
top	boolean	Set vAlign to top.
middle	boolean	Set vAlign to middle.
bottom	boolean	Set vAlign to bottom.
name	string	Toast channel name. Used to display toasts from a specific channel (default: 'default').
defaults	Partial<ToastSettings>	Default toast settings for this channel (merged into every toast). Example: `{ duration: 6000, type: 'info', position: 'top-center' }`.
limit	number	Maximum number of visible toasts for this channel. Additional toasts are queued and shown as space becomes available. Set via the `useToast` options object.

Toast Slots	Description
default	The default slot. Receives an object with: `toast`: The toast object (see `Toast` type) `removeToast`: Function to remove the toast by id Use this slot to render each toast notification as desired.

useToast

The useToast composable offers a flexible, channel-based toast notification system. Each toast channel manages its own state, queue, and configuration. Toasts can be added, removed, updated, and queued, with full support for asynchronous flows (e.g., promise toasts). Defaults can be set per channel, and all state is fully reactive for seamless UI updates.

useToast Props	Type	Description
options	UseToastOptions	Optional configuration object. Supports: - `name`: (string) The toast channel name (default: 'default'). - `defaults`: (Partial) Default toast settings for this channel (merged into each toast). - `limit`: (number) Maximum number of visible toasts for this channel. Additional toasts are queued.

useToast Provides	Type	Description
toasts	ComputedRef<Toast >	The array of active toasts for this channel (reactive).
addToast	Function	Adds a new toast to the channel. Accepts a message and optional toast options.
removeToast	Function	Removes a toast by its unique id.
clearToasts	Function	Removes all toasts and clears the queue for this channel.
updateToast	Function	Updates a toast by id with new properties (e.g., for progress or status changes).
toastPromise	Function	Displays a toast for the duration of a Promise, updating its status on resolve/reject.
setToastLimit	Function	Sets the maximum number of visible toasts for this channel. Excess toasts are queued.
name	string	The name of the current toast channel.

clearAllToastQueues

The clearAllToastQueues function clears all queued toasts across every channel. Useful for global state resets (e.g., logout).