How to Add Push Notifications to a Vue App
Tags: vue, javascript, webdev
Published: 2022-02-02 21:58:46

---
title: How to Add Push Notifications to a Vue App
published: true
date: 2021-12-22 23:08:44 UTC
tags: vue, javascript, webdev
canonical_url: https://onesignal.com/blog/how-to-add-push-notifications-to-a-vue-app/
---

 ![How to Add Push Notifications to a Vue App](https://onesignal.com/blog/content/images/2021/12/add-push-notifications-to-a-vue-app-4.jpg)

This guide will help you quickly add push notifications to your Vue application (for free) with the OneSignal-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](https://cli.vuejs.org/guide/creating-a-project.html).

### Guide Overview

- **[Part 1: Set Up Your OneSignal Account](#part-1-set-up-your-onesignal-account)**
- [Web Configuration](#web-configuration)
- **[Part 2: Configure Your Vue Application](#part-2-configure-your-vue-application)**
- [Initializing the OneSignal Vue Plugin](#initializing-the-onesignal-vue-plugin)
- [Using the Plugin on Components](#using-the-plugin-on-components)
- **[Share Your Feedback](#share-your-feedback)**

## **Part 1: Set Up Your OneSignal Account**

To begin, [log in](https://app.onesignal.com/login) to your OneSignal account. If you don't have a OneSignal account, you can easily [create a free account](https://app.onesignal.com/signup).

### Web Configuration

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

![How to Add Push Notifications to a Vue App](https://lh6.googleusercontent.com/30rSEw3USzJOb2Xt7gr_AH9M7dWQQBYBWOOfCwT4oVNJAowzpvDhbeKThTIpSp-zrzjUd7lFxotlCujJ4MFKBZeULraqvVF9Wg4_5Mr-EW6FgpUoTl8nLgw619zbROKes39Pa2DH)

Name your app and select **_Web_** as your platform.

![How to Add Push Notifications to a Vue App](https://lh5.googleusercontent.com/54HpXgwPpt9ws3onwihy4Q0QbLNkK4v-Fm--xuMpzxkf4f-tH_d0dTRtD08442qmW7SyYfEqECR995fI_oreF0HjmeN9lVat3w9Q0_Hz0KH6zWGGdt7pwCj1IaPPz0oeIrMi7uW5)

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.

![How to Add Push Notifications to a Vue App](https://lh4.googleusercontent.com/4SoFfEjjqUmsOtSaIhZ0q-qihGn-oNmkt-5r2m2X59_QoFEnghfgOph_9Pnu9E7q4yoxjIeFbv8w-4M-64hndZVge84kYPo4rgzoWub6o3COSg82tdnPMnUxAi4WBS458Rs40lAZ)

Click the **_Save_** button to continue the configuration process.

In the **_4. Upload Files_** section, click the **_Download OneSignal SDK Files_** button to get the service workers needed to receive push notifications or [download the SDK files from our Github repository](https://github.com/OneSignal/OneSignal-Website-SDK/files/7585231/OneSignal-Web-SDK-HTTPS-Integration-Files.zip).

![How to Add Push Notifications to a Vue App](https://lh6.googleusercontent.com/hUL2GGxAKMNMFR6ZIGaYglYYmQs2HKbLxz-sUgBtfsnDp2xpspV85PD9hxtq0UtFPQ2Q2Z7vB2z8mSeE_83SawnGwOxx3Ebfks_TruSVigOljy4iG_wfnfPwqYaXfLH_FPW1ZrbR)

## Part 2: Configure Your Vue Application

Now, you can follow the instructions that ship with the [onesignal-vue package on npm](https://www.npmjs.com/package/onesignal-vue).

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

- `yarn add onesignal-vue`
- `npm install --save onesignal-vue`

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

### Initializing the OneSignal 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 OneSignal application identifier.

```
import Vue from "vue";
import OneSignal from "onesignal-vue";

import App from "./App.vue";

Vue.config.productionTip = false;

Vue.use(OneSignal);

new Vue({
  render: h => h(App),
  beforeMount() {
    this.$OneSignal.init({
      appId: "<You OneSignal 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](https://documentation.onesignal.com/docs/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 OneSignal from "onesignal-vue";
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  beforeCreate() {
    this.$OneSignal.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](https://github.com/OneSignal/onesignal-vue/issues) or ping us on the [OneSignalDevs Discord server](https://discord.com/invite/EP7gf6Uz7G) 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 [OneSignal Developers Twitter](https://twitter.com/onesignaldevs). For additional support and dev inspiration, tap into our global developer community.

### >> [Connect with the OneSignal Developer Community](https://onesignal.com/onesignal-developers)