notifications-kit

Toasts, promise notifications, and confirm/prompt dialogs for Vue 3 and Nuxt. Zero dependencies.

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 ugly native ones.

Features

• 🔔 Toasts — success, error, warning, info, and loading out of the box.
• ⏳ Promise handling — toast.promise() shows loading, then resolves to success or error on its own.
• 💬 Promise-based dialogs — await confirm() and await prompt(), no callbacks.
• 🎨 Looks good by default — clean design, smooth animations, automatic dark mode.
• 📦 Zero dependencies — works instantly, nothing to configure.
• 🟦 Fully typed and works in plain Vue 3 or Nuxt.

Installation

npm install notifications-kit

Usage

Vue 3

Register the plugin and drop the container once (usually in App.vue):

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

createApp(App).use(NotificationsKit, { position: 'top-right' }).mount('#app')

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

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

Then anywhere in your app:

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

const toast = useToast()
const { confirm } = useConfirm()

function save() {
  toast.success('Changes saved')
}

async function remove() {
  if (await confirm('Delete this item?', { danger: true })) {
    toast.success('Deleted')
  }
}
</script>

Nuxt

Add the module — the container mounts automatically and the composables are auto-imported:

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

<script setup lang="ts">
// useToast and useConfirm are auto-imported
const toast = useToast()

function save() {
  toast.success('Saved!')
}
</script>

Promise notifications

Pass a promise and let it handle the states for you:

const toast = useToast()

await toast.promise(
  api.saveProfile(form),
  {
    loading: 'Saving…',
    success: 'Profile updated',
    error: 'Something went wrong',
  }
)

The success and error messages can also be functions that receive the result:

toast.promise(fetchUser(id), {
  loading: 'Loading…',
  success: (user) => `Welcome back, ${user.name}`,
  error: (err) => err.message,
})

Dialogs

const { confirm, prompt } = useConfirm()

// confirm
const ok = await confirm('Discard your changes?', {
  title: 'Are you sure?',
  confirmText: 'Discard',
  cancelText: 'Keep editing',
  danger: true,
})

// prompt
const name = await prompt('What should we call you?', {
  placeholder: 'Your name',
})
// name is the entered string, or null if cancelled

Options

| Option | Type | Default | Description | | ------------- | --------- | ------------- | ---------------------------------------- | | duration | number | 4000 | Auto-dismiss delay in ms. 0 disables. | | position | string | 'top-right' | Default position for toasts. | | dismissible | boolean | true | Whether toasts show a close button. |

Positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.

License

MIT © Kerolos Sadek