Skip to main content

Vue Component

The @novu/notification-center-vue package provides a Vue component wrapper over the Notification Center Web Component that you can use to integrate the notification center into your Vue application.

Installation

npm install @novu/notification-center-vue
note

Novu supports only Vue 3.

The plugin

The Notification Center Vue plugin can be used to register the NotificationCenterComponent as a global component. This is the recommended way to use the component.

import { createApp } from 'vue';
import NotificationCenterPlugin from '@novu/notification-center-vue';
import '@novu/notification-center-vue/dist/style.css';
// your app component
import App from './App.vue';

createApp(App).use(NotificationCenterPlugin).mount('#app');

Example usage

<script lang="ts">
export default {
data() {
return {
applicationIdentifier: import.meta.env.VITE_NOVU_APP_IDENTIFIER,
subscriberId: import.meta.env.VITE_NOVU_SUBSCRIBER_ID,
};
},
methods: {
sessionLoaded() {
console.log('Notification Center Session Loaded!');
},
},
};
</script>

<template>
<NotificationCenterComponent
:subscriberId="subscriberId"
:applicationIdentifier="applicationIdentifier"
:sessionLoaded="sessionLoaded"
/>
</template>

By default the NotificationCenterComponent renders the default bell button that opens the notification center when clicked, but it can be customized.

Example usage with a custom bell button

You can pass the custom bell button component as the default slot to the NotificationCenterComponent and it will be used to open the notification center. The NotificationCenterComponent also accepts a scoped slot which exposes the unseenCount property - the number of unseen notifications count.

<script lang="ts">
export default {
data() {
return {
applicationIdentifier: import.meta.env.VITE_NOVU_APP_IDENTIFIER,
subscriberId: import.meta.env.VITE_NOVU_SUBSCRIBER_ID,
};
},
methods: {
sessionLoaded() {
console.log('Notification Center Session Loaded!');
},
},
};
</script>

<template>
<NotificationCenterComponent
:subscriberId="subscriberId"
:applicationIdentifier="applicationIdentifier"
:sessionLoaded="sessionLoaded"
v-slot="slot"
>
<button>Notifications: {{ slot.unseenCount }}</button>
</NotificationCenterComponent>
</template>

Props

The NotificationCenterComponent accepts the same set of props as the Web Component.