VueCraft NPM

Vue Plugin & Nuxt Module ​

Vue plugin ​

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

VueToastPluginOptions ​

position ​

ToastPosition · default: 'bottom-right'

Default container position.

maxVisible ​

number · default: 5

Default maximum visible toasts.

duration ​

number · default: 4000

Default auto-dismiss duration in ms.

theme ​

'light' | 'dark' | 'system' · default: —

Default theme for all containers.

closable ​

boolean · default: true

Show close button by default.

pauseOnHover ​

boolean · default: true

Pause on hover by default.

pauseOnFocusLoss ​

boolean · default: true

Pause on tab background by default.

ignoreSSR ​

boolean · default: false

Disable SSR buffering — server-side toasts are discarded instead of buffered for the client to flush.

registerComponent ​

boolean · default: true

Globally register <ToastContainer>.

rateLimit ​

number · default: —

Max toasts added within rateLimitWindowMs; extras are silently dropped.

rateLimitWindowMs ​

number · default: 1000

Window in ms for rate limiting.

persistStorage ​

boolean · default: false

Enable localStorage persist/restore for toasts with persist: true.

All of these (except registerComponent, which only controls global component registration) are read by <ToastContainer> and ToastQueue as fallback defaults whenever the matching prop or per-toast option isn't set explicitly — see ToastContainer and ToastOptions.

Nuxt module ​

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

The module automatically:

  • Registers the Vue plugin
  • 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.