Toastflow — Toast Notifications for Vue and Nuxt
Toastflow is an accessible, lightweight toast notification library for Vue 3 and Nuxt.
This interactive playground lets you configure toast positions, timing, animations, and
behaviors, then copy the generated code straight into your project.
TypeScript-first · CSS-first theming · headless mode · SSR-ready · MIT licensed
Why Toastflow
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
Works with Vue 3.5+ and Nuxt 3/4. Install the Vue plugin or the Nuxt module and start
showing toast notifications in minutes.
npm install vue-toastflow
npm install nuxt-toastflow
Common 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
Is Toastflow accessible?
Yes. Toasts use alert/status live regions, ARIA labels (even for HTML titles), a built-in
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
playground guards window usage, so Nuxt/Vite SSR works out of the box.
Can I use it outside Vue components?
Yes. Install the plugin once, then call toast methods from stores or services. In Nuxt, use
nuxt-toastflow and call auto-imported toast (or useToast()). For non-Vue apps, use the
headless toastflow-core store and render your own UI.
How do I style it to match my brand?
Override CSS variables or animation class names, pass a theme/animation override, or use the
headless slot to ship a fully custom card with the same store logic.
How do I log or react to toast events?
Subscribe to toast.subscribe for state changes or toast.subscribeEvents for
duplicate/update/timer-reset signals, wire lifecycle hooks like onMount/onClose, and inspect
toast.getState() when you need analytics.
Documentation |
GitHub |
npm (Vue) |
npm (Nuxt)