ToastContainer

Компонент Vue, рендерящий тосты. Разместите его один раз в App.vue (или в layout Nuxt). Внутри использует <Teleport to="body">.

<ToastContainer
  position="bottom-right"
  :max-visible="5"
  :gap="8"
  :offset-x="16"
  :offset-y="16"
  :z-index="9999"
  theme="system"
/>

Пропы

Проп	Тип	По умолчанию	Описание
position	ToastPosition	'bottom-right'	Позиция контейнера по умолчанию (проп position конкретного тоста её переопределяет)
maxVisible	number	5	Максимум одновременно показанных тостов; лишние ждут в очереди
gap	number	8	Вертикальный зазор между тостами в пикселях
offsetX	number	16	Горизонтальное расстояние от края экрана в пикселях
offsetY	number	16	Вертикальное расстояние от края экрана в пикселях
zIndex	number	9999	CSS z-index контейнера
expand	boolean	false	Немедленно развернуть все группы (пропустить свёрнутое состояние)
teleportTo	string	'body'	CSS-селектор, передаваемый в <Teleport>
context	ToastContext	глобальный	Передать изолированный контекст из createToastContext()
theme	'light' | 'dark' | 'system' | ToastDesignTokens	—	Название темы или инлайн-переопределение токенов
stackMode	boolean	false	Стек в стиле Sonner: неактивные тосты сворачиваются позади переднего; hover разворачивает

Несколько контейнеров

Один <ToastContainer> автоматически обрабатывает все позиции — каждый тост рендерится в своей позиции из опции position, с fallback на проп position контейнера:

toast.success('Saved', { position: 'top-right' })
toast.error('Failed', { position: 'bottom-center' })
// Оба появятся в своих углах из одного <ToastContainer>

Для полностью изолированных очередей (отдельные зоны уведомлений) используйте createToastContext() с выделенным контейнером:

<template>
  <!-- Глобальная очередь по умолчанию — снизу справа -->
  <ToastContainer position="bottom-right" />

  <!-- Критические оповещения — сверху по центру, отдельная очередь -->
  <ToastContainer position="top-center" :context="alertCtx" :z-index="10000" />
</template>

<script setup lang="ts">
import { createToastContext, useToast } from 'vue-toast-kit'
const alertCtx = createToastContext()
const alertToast = useToast(alertCtx)
</script>

Слоты

Переопределите любую часть тоста, не теряя логику очереди:

<ToastContainer>
  <!-- Заменить весь тост -->
  <template #toast="{ toast, dismiss }">
    <MyCustomToast :data="toast" @close="dismiss(toast.id)" />
  </template>
</ToastContainer>

Слот	Пропы	Описание
#toast	{ toast, dismiss }	Полная замена одного тоста (пропускает все под-слоты)
#toast-icon	{ toast }	Заменить только иконку; по умолчанию ToastIcon
#toast-content	{ toast }	Заменить всю область сообщения + действий
#toast-action	{ toast }	Заменить кнопки действия / отмены; по умолчанию ToastActions
#toast-close	{ toast, dismiss }	Заменить кнопку закрытия
#toast-undo	{ toast, remaining }	Заменить прогресс-бар внизу тоста

Группировка

Тосты с одинаковым groupKey сворачиваются в один тост со счётчиком +N. Клик по счётчику переключает развёрнутое состояние.

// Все три вызова создают один видимый тост с "+2"
toast.info('New message from Alice', { groupKey: 'messages' })
toast.info('New message from Bob', { groupKey: 'messages' })
toast.info('New message from Carol', { groupKey: 'messages' })

Ведущий тост (первый в группе) остаётся видимым; последующие скрыты, но отслеживаются. Когда ведущий закрывается, следующий тост автоматически становится ведущим.

Опции группировки

Опция	Поведение
groupKey: 'my-key'	Включить группировку для этого тоста
Без groupKey	Тост всегда показывается отдельно

Режим стека (в стиле Sonner)

Включите stackMode на <ToastContainer>, чтобы свернуть несколько тостов в визуальный стек. Передний тост полностью виден; позади него видны до 2 карточек-«призраков», слегка уменьшенных и смещённых. Наведение на контейнер разворачивает их обратно в обычный стековый список.

<ToastContainer :stack-mode="true" position="bottom-right" />

Наведите, чтобы развернуть, уведите курсор, чтобы свернуть обратно.