Multi-Instance

createToastContext() — 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>

Related functions

useToastContext()

() => ToastContext

Reads the injected context set up by the plugin (TOAST_CONTEXT_KEY), falling back to the global singleton when nothing was injected — this is what useToast() calls internally when it isn't given an explicit context. Rarely called directly; useful when building your own composable that needs the raw context without going through useToast()'s ToastApi wrapper.

getOrCreateGlobalContext()

(opts?: GlobalToastOptions) => ToastContext

Returns the lazily-created global singleton context, creating it (with opts) on first call. createToastContext() always makes a fresh isolated context; this always returns the same one.

Both useToast(ctx)/<ToastContainer :context="ctx" /> (passed explicitly, as above) and provide/inject via TOAST_CONTEXT_KEY (what the plugin/Nuxt module does internally) work — pick whichever fits your component tree. Passing ctx explicitly is usually simpler for a handful of isolated zones; provide/inject scales better when many descendants need the same isolated context without prop-drilling it through every layer.

Rate limiting & localStorage persist

createToastContext()'s options are the same GlobalToastOptions the plugin/module accepts (see Vue Plugin & Nuxt Module) — useful for giving one isolated context its own rate limit or persistence behavior, independent of the global queue:

import { createToastContext } from 'vue-toast-kit'

// Max 3 toasts per second; extras are silently dropped
const ctx = createToastContext({ rateLimit: 3, rateLimitWindowMs: 1000 })

// Restore toasts with persist:true after page reload
const ctx2 = createToastContext({ persistStorage: true })

Or configure globally via the plugin:

app.use(VueToastPlugin, {
  rateLimit: 5,
  persistStorage: true,
})

Mark individual toasts as persistent:

toast.info('Maintenance window tonight', { persist: true, duration: 0 })
// This toast survives a page reload