Установка

Требования

Требуется Vue 3.3+. Nuxt 3+ нужен только при использовании vue-toast-kit/nuxt. Других runtime-зависимостей нет.

Установка

npm install vue-toast-kit

Peer-зависимость:

npm install "vue@>=3.3"

Быстрый старт — Vue 3

1. Зарегистрируйте плагин

// main.ts
import { createApp } from 'vue'
import { VueToastPlugin } from 'vue-toast-kit'
import 'vue-toast-kit/style'
import App from './App.vue'

const app = createApp(App)
app.use(VueToastPlugin, { position: 'bottom-right', theme: 'system' })
app.mount('#app')

2. Добавьте контейнер

<!-- App.vue -->
<template>
  <RouterView />
  <ToastContainer />
</template>

<ToastContainer> регистрируется глобально плагином. Импорт не нужен.

3. Вызывайте тосты откуда угодно

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

const toast = useToast()
</script>

<template>
  <button @click="toast.success('Saved!')">Save</button>
  <button @click="toast.error('Something went wrong')">Fail</button>
</template>

Или используйте именованный синглтон вне компонентов (Pinia-хранилища, axios-интерцепторы, route guards):

import { toast } from 'vue-toast-kit'

axios.interceptors.response.use(null, (err) => {
  toast.error(`Network error: ${err.message}`)
  return Promise.reject(err)
})

Быстрый старт — Nuxt 3

1. Добавьте модуль

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue-toast-kit/nuxt'],
  vueToastKit: {
    position: 'top-right',
    theme: 'system',
    maxVisible: 5,
  },
})

2. Добавьте контейнер в layout

<!-- layouts/default.vue -->
<template>
  <div>
    <slot />
    <ToastContainer />
    <!-- авто-импортирован -->
  </div>
</template>

3. Используйте на страницах и в composables

<script setup lang="ts">
// useToast и toast авто-импортированы — явный импорт не нужен
const toast = useToast()

async function save() {
  await toast.promise($fetch('/api/save', { method: 'POST', body: form }), {
    loading: 'Saving…',
    success: 'Saved!',
    error: (e) => e.message,
  })
}
</script>