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')

Persistence

Pass persist: true to remember how the user interacted with each notification across reloads. Requires useStorage to be installed first. Only interaction state is stored — a map of notification id to its readAt / seenAt / archivedAt / snoozedUntil timestamps under the key notifications (the plugin namespace with the v0: prefix stripped). Notification content is never stored; your code (or an adapter) stays the source of truth.

import { createStoragePlugin, createNotificationsPlugin } from '@vuetify/v0'

app.use(createStoragePlugin())
app.use(createNotificationsPlugin({ persist: true }))

Give tickets a stable id — saved state is matched by id and merges onto notifications as they register, whether that happens at load or later (adapter pushes, runtime sends). A notification that is never re-registered is not resurrected from storage, and its saved state is pruned on the next write. Expired snoozes and malformed entries are dropped on load.

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>

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 NotificationTicketInput to add domain-specific fields. Pass the type parameter through the adapter and plugin:

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

interface AppNotification extends NotificationTicketInput {
  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.

Architecture

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

Reactivity

API

Examples

Recipes

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.

FAQ