useToast()

useToast() provides the calling interface for global lightweight toast notifications. You can call it from any component, composable, or async callback without managing state or display logic in templates. Toast messages are rendered by the SwToast component, typically mounted at the layout root.

Basic Usage

加载中...

const { success, error, warning, info } = useToast()

success('Saved successfully')
error('Upload failed', { title: 'File Error' })
warning('Low storage space', { duration: 8000 })
info('A new version has been released — please refresh')

Full Options

加载中...

Use the add() method to pass the complete configuration:

const { add } = useToast()

add({
  message: 'Operation successful, data has been updated',
  title: 'Notice',
  type: 'success',
  duration: 4000, // auto-dismiss after 4 seconds; 0 means no auto-dismiss
})

Return Values

Name	Type	Description
`toasts`	`DeepReadonly<Ref<ToastItem[]>>`	Read-only reactive list of all currently visible toasts (no direct push/splice — use `add`/`remove`)
`add`	`(options: ToastOptions) => void`	Add a toast notification
`remove`	`(id: string) => void`	Remove a specific toast by ID
`success`	`(message: string, opts?) => void`	Show a success toast (green)
`error`	`(message: string, opts?) => void`	Show an error toast (red)
`warning`	`(message: string, opts?) => void`	Show a warning toast (orange)
`info`	`(message: string, opts?) => void`	Show an info toast (blue)

ToastOptions

Parameter	Type	Required	Default	Description
`message`	`string`	✓	—	Toast body text
`title`	`string`		—	Optional title shown above the body
`type`	`'success' \| 'error' \| 'warning' \| 'info'`	✓	—	Toast type — controls icon and color (`add()` has no default; required. Shorthand methods set it for you)
`duration`	`number`		`3000`	Auto-dismiss delay in ms; `0` disables auto-dismiss

Notes

SwToast must be in the layout: Toasts are rendered and queued by SwToast. Add <SwToast /> to your layout file (e.g. default.vue), otherwise there will be no visual feedback.
The shorthand methods success(), error(), warning(), info() all accept a second argument to override any option except type.
toasts is a reactive array. To implement a custom toast UI, read this array directly and use remove(id) for full custom rendering.