Toastflow - Toast notifications for Vue and Nuxt
PlaygroundToast notifications playground
Explore Toastflow - an accessible, lightweight toast notification library for Vue 3 and Nuxt. Configure positions, timing, animations, and behaviors in this interactive playground, then copy the generated code straight into your project.
TypeScript-first - CSS-first theming - headless mode - SSR-ready - MIT licensed
Why Toastflow for Vue and Nuxt
Toastflow ships sensible defaults for accessibility, queue management, and keyboard shortcuts. It is a typed core with a Vue renderer, Nuxt wrapper, CSS-first theming, and headless hooks so you can render the same store logic with your own UI. The library weighs under 5 kB gzipped, has zero runtime dependencies, and supports Vue 3.5+ with full TypeScript inference.
Accessible toast notifications
ARIA live-region toasts with focus management, pause-on-hover, keyboard shortcuts, and a prefers-reduced-motion media query ready for WCAG out of the box.
Flexible and customizable UI
Configure placement, alignment, width, action buttons, and HTML support. Override CSS variables, swap animation classes, or use the headless slot to render a fully custom toast card while keeping core behaviors.
Lightweight and SSR-ready
Minimal bundle with zero runtime dependencies, SSR-safe guards, and CSS-only animations. Works with Vite, Nuxt SSR, and edge runtimes without extra configuration.
Install Toastflow for Vue and Nuxt
Works with Vue 3.5+ and Nuxt 3/4. Install the Vue plugin or the Nuxt module and start showing toast notifications in minutes.
Install
npm install vue-toastflow
npm install nuxt-toastflowCommon use cases
- Product launches that need reliable, branded toast notifications
- Dashboards and admin panels that queue multiple events without overlap
- Nuxt SSR apps that require server-safe notification components
- Teams looking for a typed, accessible Vue toast library with headless support
Frequently asked questions
Quick answers for developers and teams evaluating Toastflow as their Vue or Nuxt toast notification solution. See how Toastflow compares to other Vue toast libraries.
Is Toastflow accessible?
Yes. Toasts use alert/status live regions, ARIA labels, pause-on-hover, and a prefers-reduced-motion media query to keep animations gentle.
Does it support SSR?
The core store is isomorphic, the Vue renderer defers DOM access until mounted, and the Nuxt wrapper keeps the setup client-safe.
Can I use it outside Vue components?
Yes. Install the plugin once, then call toast.* from stores or services. In Nuxt, use auto-imported toast or useToast(). For non-Vue apps, use the headless toastflow-core store.
How do I style it to match my brand?
Override CSS variables, pass a theme or inline css object, or use the headless slot to ship a fully custom card.
How do I log or react to toast events?
Subscribe to toast.subscribe for state changes or toast.subscribeEvents for duplicate, update, and timer-reset signals, then wire your analytics from there. See the events API reference for every signal.