Skip to main content

Documentation Index

Fetch the complete documentation index at: https://v0.x-docs.novu.co/llms.txt

Use this file to discover all available pages before exploring further.

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";
// 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_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.

ā€‹
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 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
PropTypeDescription
triggersstring[]This is an Array of events that controls the underlying popper componentā€™s trigger. Read more here