🔔 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`](packages/vue) | [![npm](https://img.shields.io/npm/v/vue-toastflow?style=flat-square&color=43b883&label=)](https://www.npmjs.com/package/vue-toastflow) | Vue 3 plugin — components, programmatic API, styles | | 💚 [`nuxt-toastflow`](packages/nuxt) | [![npm](https://img.shields.io/npm/v/nuxt-toastflow?style=flat-square&color=00dc82&label=)](https://www.npmjs.com/package/nuxt-toastflow) | Nuxt module — auto-imports, SSR, zero config | | ⚙️ [`toastflow-core`](packages/core) | [![npm](https://img.shields.io/npm/v/toastflow-core?style=flat-square&color=888&label=)](https://www.npmjs.com/package/toastflow-core) | Framework-agnostic core — store, timers, queue, events | ## 🚀 Quick Start

**Vue 3** ```bash pnpm add vue-toastflow ``` ```ts import { createToastflow } from "vue-toastflow"; createApp(App).use(createToastflow()).mount("#app"); ```

**Nuxt** ```bash pnpm add nuxt-toastflow ``` ```ts export default defineNuxtConfig({ modules: ["nuxt-toastflow"], }); ```

> 💡 Check the [Vue Quick Start](https://www.toastflow.top/docs/vue/quick-start) or [Nuxt Quick Start](https://www.toastflow.top/docs/nuxt/quick-start) 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 ```bash 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 │ ├── 🌐 site/ → unified Nuxt/Docus docs + playground │ └── 🧪 test/nuxt/ → Nuxt smoke test └── 🖼️ assets/ → shared assets ``` ## 📄 License [MIT](LICENSE) — made with ❤️ by [@adrianjanocko](https://github.com/adrianjanocko)