Live Examples

⚡ Helpers and Update

show() overloads + typed helpers

Use object, string + options, text + options, then patch the last toast by id.

⏳ Loading Workflow

Promise lifecycle with toast.loading

Single toast id transitions through loading, success, and error states.

🎨 Theming and HTML

Custom theme, CSS overrides, HTML content, and action buttons

Use theme classes, inline css object, supportHtml, and per-toast accent styling.

🧩 Custom Toast Variants

type: custom with theme, css overrides, and showIcon

Three custom toasts: CSS theme class, inline css object, and hidden icon.

🧩 Headless Rendering

Render custom cards via ToastContainer slot

Keep Toastflow runtime logic while replacing the default toast markup.

📡 State and Events

subscribe() and subscribeEvents()

Observe live state snapshots and emitted events in Vue integration.

🎲 Random Feed with <Toast />

send toast -> save -> render via Toast component

Each click sends a random runtime toast and stores a copy rendered below buttons.

📥 Queue and Backpressure

queue: true + maxVisible + queue controls

Push batches, inspect visible/queued counts, and control queue processing.

⚙️ Core Store Only

createToastStore without Vue plugin

Direct core API usage: show, update, pause, resume, and dismiss.