Toastflow

Appearance

Introduction ​

Toastflow is a toast notification system with a typed core (toastflow-core), a Vue 3 renderer (vue-toastflow), and a Nuxt module wrapper (nuxt-toastflow).

⚡ Key Features ​

🎯Seamless Setup

Install the plugin, render one <ToastContainer />, and start calling toast.* from anywhere.

🧩Customizable

Tune layout, behavior, timers, queueing, and rendering with typed options and per-toast overrides.

⚙️Deterministic Runtime

Predictable rules for duplicates, timer reset, queue processing, and clear-all transitions.

🎨CSS-First Theming

Control the look with CSS variables and animation class names without rewriting runtime logic.

📦 Package Overview ​

PackageWhat it gives you
toastflow-corecreateToastStore, all core types, loading helper, state subscriptions, event subscriptions
vue-toastflowcreateToastflow, toast helper, <ToastContainer />, <Toast />, <ToastProgress />, icon components, default CSS
nuxt-toastflowNuxt module wrapper for vue-toastflow, auto-registered ToastContainer, auto-imported toast and optional useToast

🔍 Runtime Model ​

  1. A toast is created with show (or typed helpers like toast.success).
  2. It enters state with phase: "enter".
  3. A timer is scheduled for finite durations.
  4. Dismiss sets phase: "leaving" (or "clear-all") and removes the toast after leave delay.
  5. Queue processing fills empty visible slots when queue: true.

🧰 Additional Components ​

  • 📦 ToastContainer: stack renderer and slot entry-point.
  • 🃏 Toast: card UI with progress, actions, and accessibility logic.
  • 📈 ToastProgress: animated progress strip.
  • 🧭 Icons: default type icon set.