Headless
Headless Slot
Keep the Toastflow store logic and replace the toast card markup with your own Vue or Nuxt template using the headless slot.
Use the ToastContainer slot in Vue or Nuxt when you like Toastflow's runtime behavior but need your own card markup.
Container-level features keep working with a custom slot: multiple containers (the id prop) and overflowScroll.
Basic Slot
App.vue
<template>
<ToastContainer v-slot="{ toast, ui }">
<div v-bind="ui.wrapperProps">
<article v-bind="ui.getRootProps({ class: 'my-toast' })">
<strong>{{ toast.title }}</strong>
<p v-if="toast.description">{{ toast.description }}</p>
<button v-bind="ui.getCloseProps()">Close</button>
</article>
</div>
</ToastContainer>
</template>
Actions And Progress
<template>
<button
v-for="button in ui.buttons.items"
:key="button.id"
v-bind="ui.getButtonProps(button)"
>
{{ button.label }}
</button>
</template>
<template>
<div v-if="ui.progress.show" v-bind="ui.progress.getTrackProps()">
<div v-bind="ui.progress.getBarProps()" />
</div>
</template>
<template>
<button v-bind="ui.getCloseProps({ class: 'close-button' })">Close</button>
</template>
What ui Gives You
Accessibility props
wrapperProps and getRootProps() keep structure, roles, labels, and live-region behavior intact.Dismiss behavior
getCloseProps() wires the button to the correct toast id.Action buttons
getButtonProps(button) preserves click handling, dismiss-on-click, and ARIA labels.Progress helpers
progress.* helpers let you keep Toastflow's timer state while drawing your own bar.Full Examples
The full headless playground below runs in the Vue REPL. It uses the same headlessFiles source as the Live Examples page, so the code and preview stay in one place.
Headless rendering
Trigger six different Toastflow workflows and render each toast through the ToastContainer slot.
Loading Vue REPL…