Toastflow

Appearance

Getting Started ​

Install ​

bash
pnpm add vue-toastflow
# npm i vue-toastflow
# yarn add vue-toastflow
# bun add vue-toastflow

Nuxt Install (Module Wrapper) ​

If you are using Nuxt, install the module wrapper instead of wiring the Vue plugin manually:

bash
pnpm add nuxt-toastflow
# npm i nuxt-toastflow
# yarn add nuxt-toastflow
# bun add nuxt-toastflow
ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-toastflow"],
  toastflow: {
    config: {
      position: "top-right",
      duration: 5000,
      maxVisible: 5,
      queue: true,
    },
    css: true,
    componentName: "ToastContainer",
  },
});
vue
<!-- app.vue -->
<template>
  <ToastContainer />
  <NuxtPage />
</template>

1. Install The Plugin ​

ts
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createToastflow } from "vue-toastflow";

const app = createApp(App);

app.use(
  createToastflow({
    position: "top-right",
    duration: 5000,
    maxVisible: 5,
  }),
);

app.mount("#app");

Reference

Need all plugin options and defaults? See Configuration.

2. Render A Container ​

Render one container near app root.

vue
<!-- App.vue -->
<template>
  <ToastContainer />
  <RouterView />
</template>

<script setup lang="ts">
import { ToastContainer } from "vue-toastflow";
</script>

Reference

Container behavior and slot contract: ToastContainer and Slots.

3. Fire Toasts Anywhere ​

ts
import { toast } from "vue-toastflow";

toast.success({
  title: "Saved",
  description: "Your changes are live.",
});

const id = toast.error("Network error", {
  description: "Retrying request...",
});

toast.update(id, {
  title: "Recovered",
  description: "Connection restored.",
  type: "success",
});

Reference

Method-by-method details: Actions.
Payload rules and per-toast fields: Toasts.

4. Async Flows With loading ​

ts
const request = toast.loading(() => fetch("/api/save").then((r) => r.json()), {
  loading: { title: "Saving", description: "Please wait" },
  success: (data) => ({
    title: "Saved",
    description: `Record ${data.id} stored`,
  }),
  error: (error) => ({
    title: "Failed",
    description: error instanceof Error ? error.message : "Unknown error",
  }),
});

await request;
console.log(request.toastId);

Reference

Timer behavior and progress rendering: Timers and Progress.
Emitted runtime events (update, timer-reset, duplicate): Events.

5. Optional Core-Only Usage ​

If you want to use Toastflow without Vue rendering:

ts
import { createToastStore } from "toastflow-core";

const store = createToastStore({ position: "bottom-right" });

store.subscribe((state) => {
  console.log(state.toasts, state.queue);
});

store.show({
  type: "info",
  title: "Core store active",
});

Reference

Headless/controlled integration patterns: Controlled Store.
State shape and event payloads: State and Events.

Common Setup Notes ​

  • toast helper requires an initialized store. The store is initialized by createToastflow(...).
  • You can mount multiple containers, but one root container is the normal and recommended setup.
  • Keep supportHtml disabled unless the content is trusted. You can ensure that the content is trusted by sanitizing it, for example.

Next ​