Global
Overview
Pick the right Toastflow package and learn the shared runtime model.
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.