Skip to content

Event Emitter

ToastQueue — the class backing every ToastContext — exposes subscribable events for analytics integration (Sentry, Amplitude, etc.). All listeners return an unsubscribe function.

ts
import { getOrCreateGlobalContext } from 'vue-toast-kit'

const queue = getOrCreateGlobalContext().queue

Methods

onAdd(fn)

(fn: (item: ToastItem) => void) => () => void

Subscribe to toast add events.

onDismiss(fn)

(fn: (id: string) => void) => () => void

Subscribe to toast dismiss events.

onUpdate(fn)

(fn: (id: string, partial: Partial<ToastOptions>) => void) => () => void

Subscribe to toast update events.

Example

ts
import { getOrCreateGlobalContext } from 'vue-toast-kit'

const queue = getOrCreateGlobalContext().queue

const off = queue.onAdd((item) => {
  analytics.track('toast_shown', { type: item.options.type, message: item.message })
})

queue.onDismiss((id) => {
  analytics.track('toast_dismissed', { id })
})

queue.onUpdate((id, partial) => {
  analytics.track('toast_updated', { id, ...partial })
})

// Unsubscribe when done:
off()

ToastQueue is exported from the package root for cases like this one — see API Reference for its full exported surface (add/remove/update/dismiss/dismissAll/isActive/pauseAll/ resumeAll/setMaxVisible/toggleGroupExpand/isGroupExpanded/destroy, plus active and pending as reactive arrays) — onAdd/onDismiss/onUpdate are its only events.