Headless

Headless Core Store

Use toastflow-core directly when you want full rendering control.

Use toastflow-core when you want Toastflow behavior without the Vue UI.

If you are already in Vue or Nuxt and only want custom markup, use the Headless Slot first. It is less work.

Install

pnpm add toastflow-core

npm install toastflow-core

yarn add toastflow-core

Create A Store

toast-store.ts

import { createToastStore } from "toastflow-core";

export const store = createToastStore({
  position: "bottom-right",
  maxVisible: 3,
  queue: true,
});

Render Your Own UI

import { createToastStore } from "toastflow-core";

export const store = createToastStore();

import { store } from "./toast-store";

store.subscribe((state) => {
  renderToasts(state.toasts);
  renderQueueCount(state.queue.length);
});

import { store } from "./toast-store";

const id = store.show({
  type: "info",
  title: "Renderer connected",
});

store.update(id, {
  type: "success",
  title: "Updated",
});

If the store's lifetime is shorter than the page (tests, micro-frontends, embedded widgets), call destroy() when you are done. It cancels all pending timers, clears state and queue, and drops every listener:

store.destroy();
// The store must not be used after this point.

What You Keep

Queue behavior

Keep overflow handling, max visible limits, and queue pause/resume.

Timers

Keep duration, pause-on-hover-compatible timer state, and loading updates.

Events

Subscribe to state and Toastflow events for analytics or renderer updates.

When To Use Core

Edit this pageorReport an issue

Nuxt Notes

Practical Nuxt-specific rules for client-only usage and common toast flows.

Headless Slot

Keep the Toastflow store and replace the toast card markup with your own Vue or Nuxt template.