toastflow

> 前端框架

开源

具有 Vue 3 渲染器和 Nuxt 模块支持的框架无关的 Toast 引擎。具有类型化核心、流畅的堆栈动画、以 CSS 为先的主题设计以及对布局的完全控制。

194 stars0 点赞0 次浏览

访问官网 GitHub

工具介绍

具有 Vue 3 渲染器和 Nuxt 模块支持的框架无关的 Toast 引擎。具有类型化核心、流畅的堆栈动画、以 CSS 为先的主题设计以及对布局的完全控制。

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

Vue 3

bash

pnpm add vue-toastflow

typescript

import { createToastflow } from "vue-toastflow";

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

Nuxt

bash

pnpm add nuxt-toastflow

typescript

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

Check the Vue Quick Start or 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