Vue Plugin & Nuxt Module

Vue plugin

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, // auto-register <ToastContainer> globally
})

VueToastPluginOptions

Option	Type	Default	Description
position	ToastPosition	'bottom-right'	Default container position
maxVisible	number	5	Default maximum visible toasts
duration	number	4000	Default auto-dismiss duration in ms
theme	'light' | 'dark' | 'system'	—	Default theme for all containers
closable	boolean	true	Show close button by default
pauseOnHover	boolean	true	Pause on hover by default
pauseOnFocusLoss	boolean	true	Pause on tab background by default
ignoreSSR	boolean	false	Disable SSR buffering
registerComponent	boolean	true	Globally register <ToastContainer>
rateLimit	number	—	Max toasts added within rateLimitWindowMs; extras are silently dropped
rateLimitWindowMs	number	1000	Window in ms for rate limiting
persistStorage	boolean	false	Enable localStorage persist/restore for toasts with persist: true

Nuxt module

// 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,
  },
})

The module automatically:

• Adds the Vue plugin on the client
• Auto-imports useToast, useToastState, createToastContext, and the toast singleton — no explicit import needed
• Auto-imports <ToastContainer> as a global component (when registerComponent: true)
• Injects vue-toast-kit/style.css into the Nuxt CSS pipeline

CSS is loaded automatically — no manual import of vue-toast-kit/style required in Nuxt.