Vue

Setup

Register the plugin and add the container once.

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

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

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

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

Using it

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

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

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

The store is a shared singleton, so calling useToast() in any component controls the same set of notifications — no prop drilling or provide/inject needed.