Feedback

Toaster

Renders the notifications created by toast(). Mount it once, anywhere in your app.

Install

import { Toaster } from 'vael-ui'

Playground

position

maxVisible

gap

import { toast, Toaster } from 'vael-ui'

<Toaster position="bottom-right" :max-visible="4" :gap="10" />

// anywhere in your app
toast('Saved changes')
toast.success('Upload complete')

Examples

Toast

Sonner-style: no hooks, no context. toast() is a plain function callable from anywhere, rendered by the single <Toaster /> mounted once in App.vue. Hover the stack to pause every timer with the exact remaining time preserved (not a restart) and expand it into a full list; switching tabs does the same. Drag a card left, right, or toward its anchored edge to swipe-dismiss it.

Variants

Promise-based

toast.promise renders a loading toast immediately, then swaps its content once the promise settles, success or error.

Actions and stacking

A toast can carry a trailing action button of its own. Fire several in a row to see the stack grow, hover to pause every timer at once.

Code

Props

Name	Type	Default	Description
`position`	`"bottom-right" \| "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center"`	`"bottom-right"`
`maxVisible`	`number \| undefined`	`4`	Max toasts shown at once; extras queue until visible slots free.
`gap`	`number \| undefined`	`10`	Spacing between stacked cards, px.
`teleportTo`	`string \| undefined`	`"body"`
`motionCss`	`boolean \| undefined`	`true`	`false` delegates enter/leave animations to `@card-enter`/`@card-leave` events.

Slots

Name	Type	Description
`default`	`{ entry: ToastEntry; dismiss: () => void; depth: number; expanded: boolean; }`	Replaces a card's entire inner markup. The library still owns the <li> itself (position/stacking/swipe).

Events

Name	Type	Description
`card-enter`	`[el: Element, done: () => void]`
`card-leave`	`[el: Element, done: () => void]`

Exposed

Name	Type	Description
`toasterEl`	`HTMLElement \| null`