useToast, toast.promise и toast.undo

useToast

Основной composable. Возвращает объект ToastApi. Работает внутри и вне компонентов Vue.

const toast = useToast(context?: ToastContext): ToastApi

При вызове без аргументов внутри компонента используется внедрённый контекст (настроенный плагином). При вызове вне компонента используется глобальный синглтон. Передайте ToastContext из createToastContext() для использования изолированной очереди.

Методы

Метод	Сигнатура	Описание
toast()	(message, options?) → id	Показать тост типа info
toast.success()	(message, options?) → id	Показать тост типа success
toast.error()	(message, options?) → id	Показать тост типа error (приоритет high по умолчанию)
toast.warning()	(message, options?) → id	Показать тост типа warning
toast.info()	(message, options?) → id	Показать тост типа info
toast.loading()	(message, options?) → id	Показать тост типа loading (без авто-закрытия, по умолчанию не закрывается)
toast.custom()	(component, options?) → id	Заменить тело тоста компонентом Vue
toast.promise()	(promise, messages, options?) → Promise	См. toast.promise
toast.undo()	(message, options) → id	См. toast.undo
toast.update()	(id, partial) → void	Слить опции (и опционально сообщение) в существующий тост
toast.updateMessage()	(id, message) → void	Обновить только текст сообщения, не трогая опции
toast.dismiss()	(id?) → void	Закрыть тост по id; без id закрывает все
toast.dismissAll()	(position?) → void	Закрыть все тосты, опционально с фильтром по позиции
toast.isActive()	(id) → boolean	Проверить, виден ли ещё тост
toast.pauseAll()	() → void	Поставить на паузу все таймеры
toast.resumeAll()	() → void	Возобновить все таймеры

ToastOptions

Опция	Тип	По умолчанию	Описание
id	string	авто	Уникальный id; если тост с таким id уже активен, он обновляется
type	ToastType	'info'	Визуальный стиль; один из info / success / warning / error / loading / custom
priority	ToastPriority	'normal'	Приоритет в очереди; один из critical / high / normal / low
duration	number	4000	Задержка авто-закрытия в мс; 0 = не закрывается сам
position	ToastPosition	позиция контейнера	Отрендерить этот тост в конкретной позиции, независимо от пропа position контейнера
closable	boolean	true	Показывать кнопку закрытия
groupKey	string	—	Группировать тосты с одинаковым ключом в стек
icon	Component | string | false	по умолчанию для типа	SVG-компонент, строка эмодзи или false, чтобы скрыть
action	{ label, onClick }	—	Дополнительная кнопка действия внутри тоста
undo	{ label?, onUndo, duration? }	—	Кнопка отмены с таймером; см. toast.undo
onClose	() => void	—	Вызывается при закрытии тоста (по любой причине)
onAutoClose	() => void	—	Вызывается только при истечении таймера
pauseOnHover	boolean	true	Ставить таймер на паузу при наведении курсора
pauseOnFocusLoss	boolean	true	Ставить таймер на паузу, когда вкладка уходит в фон
swipeToDismiss	boolean	true	Разрешить свайп влево / вправо для закрытия на сенсорных устройствах
persist	boolean	false	Восстанавливать из localStorage после перезагрузки (только для тостов без коллбэков)
component	Component	—	Заменить всё тело тоста компонентом Vue
componentProps	Record<string, unknown>	—	Пропы, передаваемые в component
ariaLive	'assertive' | 'polite'	авто	Переопределить автоматическое значение aria-live
theme	'light' | 'dark' | 'system' | ToastDesignTokens	—	Тема или переопределение токенов для конкретного тоста

Примеры

Все типы тостов:

toast.info('Sync complete')
toast.success('File uploaded')
toast.warning('Disk almost full (92 %)')
toast.error('Connection refused')
toast.loading('Fetching data…')

Кастомная длительность и позиция:

toast.success('Copied to clipboard', {
  duration: 2000,
  position: 'top-center',
})

С кнопкой действия:

toast.info('New message from Alex', {
  action: {
    label: 'Open',
    onClick: () => router.push('/messages'),
  },
})

Иконка-эмодзи:

toast.success('Backup complete', { icon: '💾' })

Не закрывается сам до ручного закрытия:

const id = toast.error('Server is down', { duration: 0, closable: true })
// Позже:
toast.dismiss(id)

Обновление существующего тоста:

const id = toast.loading('Uploading…')
// Обновить только сообщение (без изменения опций):
toast.updateMessage(id, 'Processing…')
// Или обновить сообщение + опции вместе:
toast.update(id, { message: 'Almost done…', duration: 3000 })

Насыщенный контент через компонент Vue:

import RichCard from './RichCard.vue'

toast.custom(RichCard, {
  componentProps: { title: 'Hello', body: 'World' },
  duration: 0,
  closable: true,
})

toast.promise

Автоматически переключает тост loading на success или error в зависимости от результата промиса. Возвращает исходный промис, чтобы вы могли сделать await.

toast.promise<T>(
  promise: Promise<T>,
  messages: PromiseToastMessages<T>,
  options?: ToastOptions,
): Promise<T>

PromiseToastMessages

Поле	Тип	Описание
loading	string	Сообщение, пока промис ожидает выполнения
success	string | (data: T) => string	Сообщение при разрешении; получает разрешённое значение
error	string | (err: unknown) => string	Сообщение при отклонении; получает ошибку

Примеры

Статические сообщения:

await toast.promise(
  fetch('/api/deploy').then((r) => r.json()),
  {
    loading: 'Deploying…',
    success: 'Deployed successfully!',
    error: 'Deployment failed',
  },
)

Динамические сообщения из данных / ошибки:

const user = await toast.promise(fetchUser(id), {
  loading: 'Loading user…',
  success: (u) => `Welcome, ${u.name}!`,
  error: (e) => `Could not load user: ${(e as Error).message}`,
})

В действии Pinia:

// stores/files.ts
import { toast } from 'vue-toast-kit'

export const useFileStore = defineStore('files', {
  actions: {
    async upload(file: File) {
      return toast.promise(uploadAPI(file), {
        loading: `Uploading ${file.name}…`,
        success: (res) => `${res.name} uploaded (${res.size} KB)`,
        error: (e) => `Upload failed: ${(e as Error).message}`,
      })
    },
  },
})

reject промиса выбрасывается заново после обновления тоста, так что ваш try / catch или .catch() по-прежнему срабатывает нормально.

toast.undo

Создаёт тост со счётчиком обратного отсчёта в виде прогресс-бара. Когда пользователь кликает по кнопке отмены, вызывается onUndo(), и тост немедленно закрывается. Когда таймер истекает, тост закрывается молча (действие подтверждено).

toast.undo(message: string, options: ToastOptions & {
  undo: {
    onUndo: () => void | Promise<void>
    label?:   string   // default: 'Отменить'
    duration?: number  // ms, default: 5000
  }
}): string

Примеры

Удаление с отменой:

function deleteFile(id: string) {
  markForDeletion(id)

  toast.undo(`File "${fileName}" deleted`, {
    undo: {
      label: 'Restore',
      duration: 6000,
      onUndo: () => {
        restoreFile(id)
        toast.success('File restored')
      },
    },
    onAutoClose: () => permanentlyDelete(id),
  })
}

Архивирование письма:

toast.undo('Email archived', {
  icon: '📨',
  undo: {
    onUndo: () => moveToInbox(emailId),
  },
})

Асинхронная отмена:

toast.undo('Record deleted', {
  undo: {
    onUndo: async () => {
      await api.restore(recordId)
      toast.success('Record restored!')
    },
  },
})