Controlled Store

Use this mode if you want full rendering control while keeping Toastflow's core behavior.

Create Store Directly

import { createToastStore } from "toastflow-core";

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

Reference

All store configuration options and defaults: Configuration.

Drive Your Own Renderer

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

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

store.update(id, {
  title: "Renderer updated",
  description: "State changed",
});

Reference

State structure and lifecycle fields used by custom renderers: State.

Vue Headless Mode With <ToastContainer> Slot

<ToastContainer
  v-slot="{
    toast,
    dismiss,
    bumpAnimationClass,
    clearAllAnimationClass,
    updateAnimationClass,
  }"
>
  <div
    class="custom-toast"
    :class="[
      toast.type,
      bumpAnimationClass,
      toast.phase === 'clear-all' && clearAllAnimationClass,
      updateAnimationClass,
    ]"
    @click="toast.closeOnClick && dismiss(toast.id)"
  >
    <strong>{{ toast.title }}</strong>
    <p v-if="toast.description">{{ toast.description }}</p>
    <button @click.stop="dismiss(toast.id)">Close</button>
  </div>
</ToastContainer>

Reference

Slot payload contract and available utilities: Slots.
Default rendered component behavior: ToastContainer.

Queue Control For Deterministic UX

Pause queue processing during critical UI flows:

store.pauseQueue();

// run guarded workflow, modal, transition, etc.

store.resumeQueue();

Reference

Queue methods and side-effects: Actions and Events.

Recommended Pattern

• Keep behavior in store config and action methods.
• Keep visuals in renderer layer (slots or custom components).
• Use state and event subscriptions for analytics or telemetry.

Next

• Store shape and toast lifecycle fields: State
• Slot payload contracts: Slots