Getting Started

notifications-kit is one small library for all your user feedback: fire-and-forget toasts, a promise helper that handles loading → success/error automatically, and await-able confirm() / prompt() dialogs to replace the native ones.

It works in plain Vue 3 and Nuxt, ships with zero dependencies, and looks good by default (including dark mode).

Installation

npm install notifications-kit

Quick start

Vue

// main.ts
import { createApp } from 'vue'
import NotificationsKit from 'notifications-kit/vue'
import App from './App.vue'

createApp(App).use(NotificationsKit).mount('#app')

Nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['notifications-kit/nuxt'],
})

In Vue, add the container once in App.vue:

<script setup lang="ts">
import { NotificationContainer } from 'notifications-kit/vue'
</script>

<template>
  <RouterView />
  <NotificationContainer />
</template>

In Nuxt the container mounts automatically — nothing to add.

Your first toast

<script setup lang="ts">
import { useToast } from 'notifications-kit/vue'
const toast = useToast()
</script>

<template>
  <button @click="toast.success('Saved!')">Save</button>
</template>

Next: explore Toasts, Promise notifications, and Dialogs.