Toastflow
Playground
API

Actions

API reference for Toastflow store actions including show, update, dismiss, dismissAll, pause, resume, and the loading helper.

Actions are the mutating methods on toast (Vue/Nuxt) or store (headless).

Full method signatures:packages/core/src/store.ts.

Method Overview

show
(options | title, options?) => ToastId
Create a toast, returns ToastId.
loading
(input, config) => Promise
Bind an async flow to loading → success / error (see below).
update
(id, options) => void
Patch an existing toast in place.
dismiss
(id) => void
Dismiss one toast.
dismissAll
(filter?: { containerId?: string }) => void
Dismiss all visible and queued toasts, optionally scoped to a container.
pause
(id) => void
Pause the timer for one toast.
resume
(id) => void
Resume the timer using pauseStrategy.
pauseQueue
() => void
Pause queue processing globally.
resumeQueue
() => void
Resume queue processing.
getState
() => ToastState
Current state snapshot.
getConfig
() => ToastConfig
Resolved global config.
subscribe
(listener) => () => void
Continuous state updates, returns an unsubscribe function.
subscribeEvents
(listener) => () => void
One-off event stream (details).

Typed wrappers: default, success, error, info, warning, custom — they pin the type field automatically.

Create Call Styles

StyleUse when
toast.show({ ... })You already have a full payload object
toast.show(title, opts)The title is the primary thing being shown
toast.success({ ... })The toast type is known at the call site
toast.error(title, opts)You want a typed helper with title + options

See Toasts for runnable examples.

title or description must be non-empty. Empty content throws.

Loading Helper

loading.ts
await toast.loading(new Promise((resolve) => window.setTimeout(resolve, 900)), {
  loading: { title: "Saving" },
  success: { title: "Saved" },
  error: { title: "Failed" },
});

The loading toast uses duration: Infinity and progressBar: false. On resolve/reject, the same toast id transitions to success or error.

For real requests, pass fetch, $fetch, or a function that returns a promise. success and error can also be functions when the final message needs response data.

loading(...) returns the wrapped promise — it rejects when the task fails (the error toast is shown either way). If you fire-and-forget the call, attach a .catch(() => {}) or the rejection surfaces as an unhandled promise rejection.

Try this example

Button mirrors the loading helper example shown above.

Copyright © 2026