Global
Overview
Compare toastflow-core, vue-toastflow, and nuxt-toastflow, and learn the shared runtime model behind Toastflow toast notifications.
One toast runtime, three entry points. Pick the package that matches your app and keep the same mental model everywhere.
Package Map
vue/main.ts
import { createApp } from "vue";
import { createToastflow } from "vue-toastflow";
import App from "./App.vue";
createApp(App).use(createToastflow()).mount("#app");
Shared Runtime
Create
Use a payload object, a title + options call, or a typed helper like toast.success(...).
Update
Keep the returned id when you want to turn a loading toast into a success or error toast.
Control
Pause the queue, dismiss all toasts, subscribe to state, or listen to lifecycle events.
toast.success({
title: "Saved",
description: "Your changes are live.",
});
const request = toast.loading(fetch("/api/save"), {
loading: { title: "Saving" },
success: { title: "Saved" },
error: { title: "Failed" },
});
await request;
toast.dismissAll();
toast.pauseQueue();
toast.resumeQueue();
toast.subscribe((state) => {
console.log(state.toasts.length);
});
Live Runtime
Try it live
These buttons use the same Toastflow runtime as your app.