VueCraft NPM

Плагин Vue и модуль Nuxt ​

Плагин Vue ​

ts
import { VueToastPlugin } from 'vue-toast-kit'
import 'vue-toast-kit/style'

app.use(VueToastPlugin, {
  position: 'bottom-right',
  maxVisible: 5,
  duration: 4000,
  theme: 'system',
  closable: true,
  pauseOnHover: true,
  pauseOnFocusLoss: true,
  registerComponent: true, // авто-регистрация <ToastContainer> глобально
})

VueToastPluginOptions ​

position ​

ToastPosition · по умолчанию: 'bottom-right'

Позиция контейнера по умолчанию.

maxVisible ​

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

Максимум видимых тостов по умолчанию.

duration ​

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

Длительность авто-закрытия по умолчанию в мс.

theme ​

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

Тема по умолчанию для всех контейнеров.

closable ​

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

Показывать кнопку закрытия по умолчанию.

pauseOnHover ​

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

Пауза при наведении по умолчанию.

pauseOnFocusLoss ​

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

Пауза при уходе вкладки в фон по умолчанию.

ignoreSSR ​

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

Отключить SSR-буферизацию — тосты, вызванные на сервере, отбрасываются вместо буферизации для последующего сброса на клиенте.

registerComponent ​

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

Глобально регистрировать <ToastContainer>.

rateLimit ​

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

Максимум тостов в пределах rateLimitWindowMs; лишние тихо отбрасываются.

rateLimitWindowMs ​

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

Окно в мс для ограничения частоты.

persistStorage ​

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

Включить сохранение/восстановление в localStorage для тостов с persist: true.

Все эти опции (кроме registerComponent, которая только управляет глобальной регистрацией компонента) читаются <ToastContainer> и ToastQueue как fallback-дефолты, когда соответствующий проп или опция конкретного тоста не заданы явно — см. ToastContainer и ToastOptions.

Модуль Nuxt ​

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue-toast-kit/nuxt'],

  vueToastKit: {
    position: 'bottom-right',
    maxVisible: 5,
    duration: 4000,
    theme: 'system',
    closable: true,
    pauseOnHover: true,
    pauseOnFocusLoss: true,
    registerComponent: true,
  },
})

Модуль автоматически:

  • Регистрирует плагин Vue
  • Авто-импортирует useToast, useToastState, createToastContext и синглтон toast — явный импорт не нужен
  • Авто-импортирует <ToastContainer> как глобальный компонент (когда registerComponent: true)
  • Внедряет vue-toast-kit/style.css в CSS-пайплайн Nuxt

CSS загружается автоматически — ручной импорт vue-toast-kit/style в Nuxt не требуется.