Nuxt

Setup

Add the module. The container mounts automatically and the composables are auto-imported — nothing else to wire up.

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

  notifications: {
    position: 'top-right',
    duration: 4000,
  },
})

Usage

useToast and useConfirm are available everywhere without an import:

<script setup lang="ts">
const toast = useToast()
const { confirm } = useConfirm()

async function save() {
  await toast.promise(saveData(), {
    loading: 'Saving…',
    success: 'Saved!',
    error: 'Failed to save',
  })
}
</script>

<template>
  <button @click="save">Save</button>
</template>

Because notifications touch the DOM, the container is registered as a client plugin — it only runs in the browser, which avoids SSR issues automatically.