I recently needed a toast system for a Vue 3 app that was modern, lightweight, and didn’t fight custom styling.
I tried several existing Vue toast libraries and kept running into the same problems: many were Vue 2–only or effectively unmaintained, styling was hard-wired instead of properly themeable, basic features like duplicate handling or timers behaved inconsistently, and composing predictable stacks across positions was harder than it should be.
So I ended up building my own solution and splitting it into two parts: a small headless core (Toastflow) and a Vue 3 renderer on top (vue-toastflow).
The core keeps toast state in a tiny, framework-agnostic store. The Vue package is just a renderer with a ToastContainer component and a global toast helper. The idea was to keep logic and rendering clearly separated and avoid magic.
A few design decisions I focused on: - CSS-first theming. The default appearance is driven by CSS variables (including per-type variables like success/error colors). Swapping design or integrating with Tailwind or daisyUI usually means editing one file, not overriding component internals. - Deterministic behavior. Duplicates, timers, pause-on-hover, maxVisible, stack order (newest vs oldest), and clear-all are all handled centrally so they behave the same everywhere. - Smooth stack animations for all positions (top/bottom, left/center/right), including when items in the middle are removed. This is built with TransitionGroup and can be overridden via config. - A typed API that works inside and outside components. You install the plugin once, then import toast from anywhere (components, composables, services, plain TS modules). Helpers include show, success, error, warning, info, loading, update, dismiss, and dismissAll. - Support for async flows, optional HTML content, lifecycle hooks, events, timestamps, and a headless slot API if you want to render your own toast cards.
Example usage is intentionally boring: install once, render a ToastContainer somewhere, call toast.success(...) where needed.
Links, for anyone curious: - Playground / demo: https://toastflow.adrianjanocko.sk - GitHub: https://github.com/adrianjanocko/toastflow - npm (Vue renderer): https://www.npmjs.com/package/vue-toastflow