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 конкретного тоста её переопределяет). Если ни этот проп, ни опция конкретного тоста не заданы — используется опция position из плагина/модуля (GlobalToastOptions).

maxVisible

number · по умолчанию: 5

Максимум одновременно показанных тостов; лишние ждут в очереди. Если не задан — используется опция maxVisible из плагина/модуля.

gap

number · по умолчанию: 8

Вертикальный зазор между тостами в пикселях.

offsetX

number · по умолчанию: 16

Горизонтальное расстояние от края экрана в пикселях.

offsetY

number · по умолчанию: 16

Вертикальное расстояние от края экрана в пикселях.

zIndex

number · по умолчанию: 9999

CSS z-index контейнера.

expand

boolean · по умолчанию: false

Только для stackMode: держать стек постоянно развёрнутым — как будто на контейнер всегда наведён курсор. Без stackMode не действует.

teleportTo

string · по умолчанию: 'body'

CSS-селектор, передаваемый в <Teleport>.

context

ToastContext · по умолчанию: глобальный

Передать изолированный контекст из createToastContext().

theme

'light' | 'dark' | 'system' | ToastDesignTokens · по умолчанию: —

Название темы или инлайн-переопределение токенов. Если не задан — используется опция theme из плагина/модуля.

stackMode

boolean · по умолчанию: false

Стек в стиле Sonner: неактивные тосты сворачиваются позади переднего; hover разворачивает.

position, theme и maxVisible читают GlobalToastOptions плагина/модуля (через inject), когда соответствующий проп не передан явно — поэтому <ToastContainer /> вообще без пропов учитывает app.use(VueToastPlugin, { position: 'top-left', ... }) или конфиг Nuxt-приложения vueToastKit: { ... }.

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

Один <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" />

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