useNotifications

Notification lifecycle management with severity levels, state mutations, toast queuing, and auto-dismiss.

Installation

Install the Notifications plugin in your app’s entry point:

import { createApp } from 'vue'
import { createNotificationsPlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(createNotificationsPlugin())

app.mount('#app')

Usage

Once the plugin is installed, use the useNotifications composable in any component:

<script setup lang="ts">
  import { useNotifications } from '@vuetify/v0'

  const notifications = useNotifications()

  function onSave () {
    notifications.send({
      subject: 'Changes saved',
      severity: 'success',
      timeout: 3000,
    })
  }

  function onError () {
    notifications.send({
      subject: 'Build failed',
      severity: 'error',
      timeout: -1,
    })
  }
</script>

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

Architecture

createNotifications layers notification semantics on top of the registry and queue primitives, with plugin installation via createPluginContext:

Severity Levels

The severity field categorizes notifications by urgency. It maps to ARIA live region roles automatically:

NotificationSeverity is extensible — custom values like 'critical' are accepted with autocomplete for the four defaults.

API

Examples

Adapters

Adapters let you swap the underlying notification service without changing your application code.

Knock

Knock↗︎ is a notification infrastructure platform with feeds, preferences, and multi-channel delivery. Install their JavaScript SDK↗︎ to get started. Supports both inbound (feed → notifications) and outbound (read/archive → Knock API).

pnpm add @knocklabs/client

npm install @knocklabs/client

yarn add @knocklabs/client

bun add @knocklabs/client

import { createApp } from 'vue'
import { createNotificationsPlugin } from '@vuetify/v0'
import { KnockNotificationsAdapter } from '@vuetify/v0/notifications'
import { feed } from './plugins/knock'
import App from './App.vue'

const app = createApp(App)

app.use(
  createNotificationsPlugin({
    adapter: new KnockNotificationsAdapter(feed),
  })
)

app.mount('#app')

import Knock from '@knocklabs/client'

export const knock = new Knock(import.meta.env.VITE_KNOCK_PUBLIC_KEY)
knock.authenticate(import.meta.env.VITE_KNOCK_USER_ID)

export const feed = knock.feeds.initialize(
  import.meta.env.VITE_KNOCK_FEED_CHANNEL_ID
)

Novu

Novu↗︎ is an open-source notification infrastructure with in-app feeds, digests, and multi-channel delivery. Install their JavaScript SDK↗︎ to get started. Supports both inbound (feed → notifications) and outbound (read/unread/seen/archive/unarchive → Novu API).

The adapter maps Novu severity strings to NotificationSeverity by default: critical/high → error, medium → warning, low → info. Pass a custom severity function to override.

pnpm add @novu/js

npm install @novu/js

yarn add @novu/js

bun add @novu/js

import { createApp } from 'vue'
import { createNotificationsPlugin } from '@vuetify/v0'
import { NovuNotificationsAdapter } from '@vuetify/v0/notifications'
import { novu } from './plugins/novu'
import App from './App.vue'

const app = createApp(App)

app.use(
  createNotificationsPlugin({
    adapter: new NovuNotificationsAdapter(novu),
  })
)

app.mount('#app')

import { Novu } from '@novu/js'

export const novu = new Novu({
  subscriberId: import.meta.env.VITE_NOVU_SUBSCRIBER_ID,
  applicationIdentifier: import.meta.env.VITE_NOVU_APP_ID,
})

Custom Adapters

Extend NotificationsAdapter to connect any backend:

import { NotificationsAdapter } from '@vuetify/v0/notifications'
import type { NotificationsAdapterContext } from '@vuetify/v0'

class MyBackendAdapter extends NotificationsAdapter {
  setup (context: NotificationsAdapterContext) {
    // Wire inbound: push notifications into the registry
    myBackend.onMessage(msg => {
      context.send({ id: msg.id, title: msg.title, body: msg.body })
    })

    // Wire outbound: sync read/archive actions back to the backend
    context.on('notification:read', (data: any) => {
      myBackend.markRead(data.id)
    })
  }

  dispose () {
    myBackend.disconnect()
  }
}

app.use(createNotificationsPlugin({ adapter: new MyBackendAdapter() }))

Adapter context methods:

Custom Ticket Fields

Extend NotificationInput to add domain-specific fields. Pass the type parameter through the adapter and plugin:

import { NotificationsAdapter } from '@vuetify/v0/notifications'
import type { NotificationInput, NotificationsAdapterContext } from '@vuetify/v0'

interface AppNotification extends NotificationInput {
  priority: 'low' | 'medium' | 'high'
  imageUrl?: string
}

class MyBackendAdapter extends NotificationsAdapter<AppNotification> {
  setup (context: NotificationsAdapterContext<AppNotification>) {
    myBackend.onMessage(msg => {
      context.send({
        id: msg.id,
        subject: msg.title,
        priority: msg.priority,    // custom field
        imageUrl: msg.imageUrl,    // custom field
      })
    })
  }
}

app.use(createNotificationsPlugin<AppNotification>({ adapter: new MyBackendAdapter() }))

Custom fields are preserved on the ticket and accessible anywhere you inject the notifications context.