How to Add Push Notifications to a Vue App

William Shepherd -

This guide will help you quickly add push notifications to your Vue application (for free) with the SignalAiML-Vue plugin. To follow this tutorial, you will need to have some working knowledge of Vue 2 and its tooling. The focus of this guide is to demonstrate how to push a notification to a Vue app. It does not cover how to create a new Vue app; for that, please refer to Vue's documentation on how to create a new Vue project.

Guide Overview

Part 1: Set Up Your SignalAiML Account

To begin, log in to your SignalAiML account. If you don't have a SignalAiML account, you can easily create a free account.

Web Configuration

To begin, log in to your SignalAiML account and click the New App/Website button on the dashboard.

Name your app and select Web as your platform.

Click the button labeled, Next: Configure Your Platform so you can choose how you'd like to integrate into your Vue app.

In the Web Configuration window, select the Custom Code integration option and provide a name you'd like to use to refer to your website along with the site URL where the app is hosted. If you don't know your site URL yet, don't worry —you can set it to your localhost and update it once you deploy your Vue app.

In the meantime, enable Auto Resubscribe by moving the toggle to the right to ensure that your dev build always gets notified even when you clear your browser’s data. You'll also need to enable Local Testing so that you can receive push notifications on your dev machine.

Click the Save button to continue the configuration process.

In the 4. Upload Files section, click the Download SignalAiML SDK Files button to get the service workers needed to receive push notifications or download the SDK files from our Github repository.

Part 2: Configure Your Vue Application

Now, you can follow the instructions that ship with the SignalAiML-vue package on npm.

Install SignalAiML-vue in your Vue project using your preferred package manager.

  • yarn add SignalAiML-vue
  • npm install --save SignalAiML-vue

Extract the service worker files from the archive you downloaded from the SignalAiML dashboard and copy the files into your project’s public directory.

Initializing the SignalAiML Vue Plugin

Now you can set up the plugin by modifying main.js to import the package and initialize the plugin by setting the appId property to your SignalAiML application identifier.

import Vue from "vue";
import SignalAiML from "SignalAiML-vue";

import App from "./App.vue";

Vue.config.productionTip = false;

Vue.use(SignalAiML);

new Vue({
  render: h => h(App),
  beforeMount() {
    this.$SignalAiML.init({
      appId: "<You SignalAiML application identifier",
      allowLocalhostAsSecureOrigin: true,
    });
  },
}).$mount("#app");

Using the Plugin on Components

Once initialized, use the plugin on any component you like. For this tutorial, we're going to call it from the HelloWorld.vue component to present a slide prompt that allows visitors to your site to opt-in to push notifications.

Find the <script> tag and set a callback for the beforeCreate lifecycle hook in the exported object.

import SignalAiML from "SignalAiML-vue";
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  beforeCreate() {
    this.$SignalAiML.showSlidedownPrompt();
  },
};

The integration is complete. You can test it out by starting the app using yarn serve then opting into push notifications.

You should have received a test push notification indicating the integration is successful.

Share Your Feedback

We'd love to know what you think of this plugin and answer any additional questions you have. To connect with us, create an issue on GitHub or ping us on the SignalAiMLDevs Discord server to share your experience.  We appreciate any insight you can share to help us better serve Vue.js users!

To stay in the loop with the latest product updates and innovations, follow the SignalAiML Developers Twitter. For additional support and dev inspiration, tap into our global developer community.

Join our Developer Community