Add a real time notification system to your Vue app

Notifications can be a great way to give your users important information and get them engaged with your product. Building an in-app notification center has a lot of pieces to it including:

• User interface for seeing the notifications

• Template system for easily updating notifications

• Queuing system for handling high volume notifications

• Real-time queries to show notifications and badges as soon as they are available

• View and click tracking to measure the usage of notifications

In this article we're going to use the vue-notification-system npm package as a shortcut so we don't have to build each of those components from scratch. The whole project shouldn't take more than 30 min to get your first notification sent. You can see a demo of the notification center here.

If you prefer watching video guides instead, check out the video below.

Adding the vue component

To get started, head over to the npm package and add the vue-notification-system component to your Vue project. You can add it like this:

npm install --save vue-notification-system

Then you can add the vue-notification-system component to your UI, wherever you want the bell icon to appear to allow your users to see their notifications.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <vue-notification-system appId="u5O4GI0C8X" subscriberId="foo3"></vue-notification-system>
  </div>
</template>
 
<script>
  import VueNotificationSystem from 'vue-notification-system/src/components/NotificationSystem.vue'
 
export default {
  name: 'Home',
  components: {
    VueNotificationSystem
  }
}
</script>
 
<style>
.feed-container {
  right: -440px !important;
}
</style>

There are two props in the vue component: appId and subscriberId. You'll get an appId automatically generated in the next section (setting up Ravenhub). The subscriberId is the unique ID that you use to identify a user in your app. This is how the component knows which user's notifications to show.

By this point, you should have the notification bell somewhere in your app, but you won't have any notifications yet! We'll get to that next.

Setting up Ravenhub

In order to start sending notifications to your user's notification center, you'll need to create a Ravenhub account to create some notification templates and generate an API endpoint to send requests to. To see the full documentation on managing templates and sending notifications, head over to the docs.ravenhub.io.

After signing up for your account, you can create a Template and Event Type which will automatically generate an API endpoint where you can send your data to generate a notification. With the endpoint URL and the subscriberId that you want to send a notification to, you can send a notification from your app like this:

const subscriberId = 'foo1';
let endpoint = 'https://api.ravenhub.io/company/MK6ey8wi3b/subscribers/'
 + subscriberId + '/events/owtDEKN0iP';
 
axios.post(endpoint, { "priority" : "Critical" }, {
 headers: {'Content-type': 'application/json'}
});

As soon as you send the request, you should see the notification center automatically update with a badge over the bell icon showing how many unread notifications there are because the Ravenhub notification system has real-time updates and takes advantage of the vue js reactive framework.

The last thing to note is that you can use the Ravenhub dashboard to see if your users are viewing or ignoring your notifications. You can also see if users are clicking on the buttons and calls to action in the notifications or just ignoring them. This can help you measure whether or not people find the notifications useful, or just annoying. It's important to keep your notifications useful and relevant to each user, otherwise they may simply ignore them.

For a deeper dive into getting started with Ravenhub, check out the getting started guide.