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
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";
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_APPLICATION_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.
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 counts.
<script lang="ts">
export default {
data() {
return {
applicationIdentifier: import.meta.env.VITE_NOVU_APPLICATION_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>
Example
Props
The NotificationCenterComponent
accepts the same set of props as the Web Component.
It also accepts an extra prop
Prop | Type | Description |
---|
triggers | string[] | This is an Array of events that controls the underlying popper component’s trigger. Read more here |