🔔 Toastflow

Framework-agnostic toast engine with Vue 3 renderer and Nuxt module support.
Typed core · smooth stack animations · CSS-first theming · full layout control.

📖 Docs · 🎮 Playground · ⚔️ Comparisons

📦 Packages

Package	Version	Description
🟢 vue-toastflow		Vue 3 plugin — components, programmatic API, styles
💚 nuxt-toastflow		Nuxt module — auto-imports, SSR, zero config
⚙️ toastflow-core		Framework-agnostic core — store, timers, queue, events

🚀 Quick Start

pnpm add vue-toastflow

import { createToastflow } from "vue-toastflow";

createApp(App).use(createToastflow()).mount("#app");

pnpm add nuxt-toastflow

export default defineNuxtConfig({
  modules: ["nuxt-toastflow"],
});

💡 Check the Getting Started guide for full setup with examples.

✨ Highlights

• 🎯 Typed from core to UI — full TypeScript, no any
• 🎨 CSS-first theming — override CSS variables, no JS config needed
• 📚 Queue & stack management — maxVisible, auto-queue, smooth animations
• ⏱️ Timer controls — pause on hover, progress bars, loading toasts
• 🧩 Composable architecture — slots, events, headless mode
• 🔌 Framework-agnostic core — bring your own renderer

🏗️ Development

pnpm install        # 📥 install all dependencies
pnpm build          # 🔨 build all packages
pnpm test           # 🧪 run all tests
pnpm lint           # 🔍 lint
pnpm format         # 💅 format with Prettier

🗂️ Monorepo Structure

toastflow/
├── 📦 packages/
│   ├── 🟢 vue/           → vue-toastflow
│   ├── 💚 nuxt/          → nuxt-toastflow
│   ├── ⚙️ core/          → toastflow-core
│   ├── 📖 docs/vue/      → VitePress docs
│   ├── 🎮 playground/vue → local playground app
│   └── 🧪 test/nuxt/     → Nuxt smoke test
└── 🖼️ assets/            → shared assets

📄 License

MIT — made with ❤️ by @adrianjanocko