Мульти-инстансы

createToastContext() — создаёт изолированный экземпляр очереди. Передайте его в useToast(ctx) и <ToastContainer :context="ctx" />, чтобы полностью отделить область уведомлений от глобальной.

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

Сценарии использования:

• Оболочки микрофронтендов, где каждый MFE управляет своими уведомлениями
• Модальные диалоги с локальными статус-тостами, которые не должны пересекаться с очередью уровня приложения
• Несколько отдельных зон уведомлений на одной странице

Пример

<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>

    <!-- Этот контейнер показывает только тосты из modalCtx -->
    <ToastContainer :context="modalCtx" position="top-right" :z-index="10001" />
  </div>
</template>

Смежные функции

useToastContext()

() => ToastContext

Читает внедрённый контекст, настроенный плагином (TOAST_CONTEXT_KEY), с fallback на глобальный синглтон, если ничего не внедрено — именно это useToast() вызывает внутри себя, когда ему не передан явный контекст. Редко вызывается напрямую; полезна при построении собственного composable, которому нужен сырой контекст без обёртки ToastApi от useToast().

getOrCreateGlobalContext()

(opts?: GlobalToastOptions) => ToastContext

Возвращает лениво создаваемый глобальный синглтон-контекст, создавая его (с opts) при первом вызове. createToastContext() всегда создаёт новый изолированный контекст; эта функция всегда возвращает один и тот же.

Работают оба подхода: useToast(ctx)/<ToastContainer :context="ctx" /> (передача явно, как выше) и provide/inject через TOAST_CONTEXT_KEY (то, что делает плагин/модуль Nuxt внутри себя) — выбирайте, что подходит под ваше дерево компонентов. Явная передача ctx обычно проще для нескольких изолированных зон; provide/inject лучше масштабируется, когда одному и тому же изолированному контексту нужен доступ у многих потомков без прокидывания пропа через каждый уровень.

Ограничение частоты и сохранение в localStorage

Опции createToastContext() — те же GlobalToastOptions, что принимает плагин/модуль (см. Плагин Vue и модуль Nuxt) — полезно, чтобы дать одному изолированному контексту собственное ограничение частоты или персистентность, независимо от глобальной очереди:

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

// Максимум 3 тоста в секунду; лишние тихо отбрасываются
const ctx = createToastContext({ rateLimit: 3, rateLimitWindowMs: 1000 })

// Восстанавливать тосты с persist:true после перезагрузки страницы
const ctx2 = createToastContext({ persistStorage: true })

Или настройте глобально через плагин:

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

Отметьте отдельные тосты как персистентные:

toast.info('Maintenance window tonight', { persist: true, duration: 0 })
// Этот тост переживёт перезагрузку страницы