Installation

Requirements

Requires Vue 3.3+. Nuxt 3+ is only needed if you use vue-toast-kit/nuxt. No other runtime dependencies.

Installation

npm install vue-toast-kit

Peer dependency:

npm install "vue@>=3.3"

Quick start — Vue 3

1. Register the plugin

// 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. Add the container

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

<ToastContainer> is registered globally by the plugin. No import needed.

3. Fire toasts from anywhere

<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>

Or use the named singleton outside components (Pinia stores, axios interceptors, route guards):

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

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

Quick start — Nuxt 3

1. Add the module

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

2. Add the container to your layout

<!-- layouts/default.vue -->
<template>
  <div>
    <slot />
    <ToastContainer />
    <!-- auto-imported -->
  </div>
</template>

3. Use in pages and composables

<script setup lang="ts">
// useToast and toast are auto-imported — no explicit import needed
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>