Our VueJS NPM Package is Now Available

Rodrigo Gomez-Palacio -

We are pleased to announce that our VueJS OneSignal SDK plugin is now generally available. This new Vue plugin supports Vue developers using OneSignal by reducing friction when embedding our web push SDK into your Vue web application.

Vue is a Javascript framework like React or Angular used to build user interfaces. It uses a component-based model that improves development and efficiency. As the popularity of Vue has exploded in recent years, OneSignal is proud to be able to support the framework via an official maintained plugin. By leveraging both VueJS and OneSignal, developers will more easily be able to improve targeted messaging while making use of one of the best Javascript frameworks in the industry.

There are separate npm packages for Vue2 and Vue3 integrations:

Benefits of Using Our VueJS SDK

The OneSignal VueJS plugin streamlines the process of integrating OneSignal. The SDK now includes all the most up-to-date OneSignal functions available in the native web push SDK. Because the SDK is now available as an NPM package, you can more easily manage OneSignal along with your existing dependencies. Additionally, the SDK comes with full Typescript support you can leverage right out of the box.

Getting Started

Getting started is easy. We've included a step-by-step setup guide on the official OneSignal documentation page via the OneSignal-Vue Setup instructions.

Adding the Plugin to Your App

First, add the Vue OneSignal package to your package.json file using the package manager tool of your choice:

Yarn

yarn add onesignal-vue

npm

npm install --save onesignal-vue

Setting up the VueJS Plugin

import Vue from 'vue'
import OneSignalVue from 'onesignal-vue'

Vue.use(OneSignalVue);

Hosting the Service Worker Files

Make sure you have uploaded the necessary files you need to host for the service worker installation.

Initializing OneSignal

Initialize OneSignal with your appId via the options parameter:

new Vue({
  render: h => h(App),
  beforeMount() {
    this.$OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });
  }
}).$mount('#app')

The init function returns a promise that resolves when OneSignal is loaded.

Examples

await this.$OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });
// do other stuff

this.$OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }).then(() => {
  // do other stuff
});

Other Initialization Options

You can pass other options to the init function. Use these options to configure personalized prompt options, auto-resubscribe, and more.

Additional Setup & Configuration Resources

See the official OneSignal WebSDK reference for information on all available SDK functions, events, and listeners.

Share Your Feedback

If you’ve had a chance to use our new ReactJS SDK and have any feedback or suggestions you’d like to share, please do reach out to us on the GitHub repository or on our Discord server.

If you encounter any bugs or technical issues while using our new ReactJS SDK, we want to know so we can make things right. Please be sure to file a report on our GitHub repository.

If you’ve found the plugin useful, we’d appreciate it if you leave us a review on G2.

Join our Discord Server