Headless Mode & Multi-Instance

useToastState — headless mode

Returns raw reactive data from the queue. Use it to build a completely custom notification UI — <ToastContainer> is not needed.

const { active, pending, count, has } = useToastState(context?: ToastContext)

Return value

Property	Type	Description
active	ComputedRef<ToastItem[]>	Currently visible toasts (excluding hidden grouped ones)
pending	ComputedRef<ToastItem[]>	Toasts waiting for a slot
count	ComputedRef<number>	active.value.length
has(id)	(id: string) → boolean	Check if a toast is active

Example — fully custom render

<script setup lang="ts">
import { useToast, useToastState } from 'vue-toast-kit'

const toast = useToast()
const { active } = useToastState()
</script>

<template>
  <!-- No <ToastContainer> — render entirely from scratch -->
  <div class="my-notifications">
    <div
      v-for="t in active"
      :key="t.id"
      :class="`notification notification--${t.options.type}`"
      @mouseenter="t.pause()"
      @mouseleave="t.resume()"
    >
      <span>{{ t.message }}</span>
      <button @click="t.dismiss()">✕</button>
      <div class="progress" :style="{ width: `${t.remaining.value * 100}%` }" />
    </div>
  </div>
</template>

Each ToastItem in active is fully reactive:

Property / Method	Type	Description
id	string	Unique id
message	string | VNode	Toast content
options	ToastOptions (required)	Merged options
createdAt	number	Date.now() at creation
remaining	Ref<number>	0–1, fraction of timer remaining
isPaused	Ref<boolean>	Timer is paused
groupCount	Ref<number>	1 normally; >1 when grouping is active
pause()	() → void	Pause the timer
resume()	() → void	Resume the timer
dismiss()	() → void	Close the toast
update(opts)	(Partial<ToastOptions>) → void	Merge new options

createToastContext — multi-instance

Creates an isolated queue instance. Pass it to useToast(ctx) and <ToastContainer :context="ctx" /> to completely separate the notification scope from the global one.

const ctx = createToastContext(options?: GlobalToastOptions): ToastContext

Use cases:

• Micro-frontend shells where each MFE manages its own notifications
• Modal dialogs with local status toasts that must not interfere with the app-level queue
• Multiple separate notification zones on one page

Example

<script setup lang="ts">
import { createToastContext, useToast, ToastContainer } from 'vue-toast-kit'

const modalCtx = createToastContext({ maxVisible: 3 })
const modalToast = useToast(modalCtx)

function save() {
  modalToast.success('Changes saved inside the modal')
}
</script>

<template>
  <div class="modal">
    <button @click="save">Save</button>

    <!-- This container only shows toasts from modalCtx -->
    <ToastContainer :context="modalCtx" position="top-right" :z-index="10001" />
  </div>
</template>