Tired of Vue toast libraries, so I built my own (headless, Vue 3, TS-first)

[adrianjanocko]

Hey folks 👋 author here, looking for feedback.

I recently needed a toast system for a Vue 3 app that was:

• modern,
• lightweight,
• and didn’t fight my custom styling.

I tried several Vue toast libraries and kept hitting the same issues: a lot of them were Vue 2–only or basically unmaintained, the styling was hard-wired instead of properly themeable, some were missing pretty basic options, and almost none gave me predictable behavior for things like duplicates, timers, or multiple stacks.

So I ended up building my own: Toastflow (core engine) + vue-toastflow (Vue 3 renderer).

What it is

• Headless toast engine + Vue 3 renderer
• Toastflow keeps state in a tiny, framework-agnostic store (toastflow-core), and vue-toastflow is just a renderer on top with <ToastContainer /> + a global toast helper.
• CSS-first theming
• The default look is driven by CSS variables (including per-type colors like --success-bg, --error-text, etc.). You can swap the design by editing one file or aligning it with your Tailwind/daisyUI setup.
• Smooth stack animations
• Enter/leave + move animations when items above/below are removed, for all positions (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right). Implemented with TransitionGroup and overridable via animation config.
• Typed API, works inside and outside components
• You install the plugin once, then import toast from anywhere (components, composables, services, plain TS modules). Typed helpers: toast.show, toast.success, toast.error, toast.warning, toast.info, toast.loading, toast.update, toast.dismiss, toast.dismissAll, etc.
• Deterministic behavior
• The core handles duplicates, timers, pause-on-hover, close-on-click, maxVisible, stack order (newest/oldest), and clear-all in a predictable way.
• Extras
• Promise/async flows (toast.loading), optional HTML content with supportHtml, lifecycle hooks, events (toast.subscribeEvents), timestamps (showCreatedAt, createdAtFormatter), and a headless slot API if you want to render your own card.

Quick taste

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createToastflow, ToastContainer } from 'vue-toastflow'

const app = createApp(App)

app.use(
  createToastflow({
    // optional global defaults
    position: 'top-right',
    duration: 5000,
  }),
)

// register globally or import locally where you render it    
app.component('ToastContainer', ToastContainer)

app.mount('#app')

<!-- Somewhere in your app -->
<script setup lang="ts">
import { toast } from 'vue-toastflow'

function handleSave() {
  toast.success({
    title: 'Saved',
    description: 'Your changes have been stored.',
  })
}
</script>

<template>
  <button @click="handleSave">Save</button>
  <ToastContainer />
</template>

Links

• Playground / demo: https://toastflow.adrianjanocko.sk
• GitHub: https://github.com/adrianjanocko/toastflow
• npm (Vue renderer): https://www.npmjs.com/package/vue-toastflow