Headless-режим и мульти-инстансы

useToastState — headless-режим

Возвращает сырые реактивные данные очереди. Используйте для построения полностью кастомного UI уведомлений — <ToastContainer> не нужен.

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

Возвращаемое значение

Свойство	Тип	Описание
active	ComputedRef<ToastItem[]>	Текущие видимые тосты (исключая скрытые сгруппированные)
pending	ComputedRef<ToastItem[]>	Тосты, ожидающие слота
count	ComputedRef<number>	active.value.length
has(id)	(id: string) → boolean	Проверить, активен ли тост

Пример — полностью кастомный рендер

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

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

<template>
  <!-- Без <ToastContainer> — рендерим полностью с нуля -->
  <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>

Каждый ToastItem в active полностью реактивен:

Свойство / Метод	Тип	Описание
id	string	Уникальный id
message	string | VNode	Содержимое тоста
options	ToastOptions (обязательно)	Объединённые опции
createdAt	number	Date.now() в момент создания
remaining	Ref<number>	0–1, доля оставшегося времени таймера
isPaused	Ref<boolean>	Таймер на паузе
groupCount	Ref<number>	Обычно 1; >1, когда активна группировка
pause()	() → void	Поставить таймер на паузу
resume()	() → void	Возобновить таймер
dismiss()	() → void	Закрыть тост
update(opts)	(Partial<ToastOptions>) → void	Слить новые опции

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>