We are pleased to announce the release of our VueJS OneSignal SDK plugin (beta). This new Vue plugin supports Vue developers using OneSignal by reducing friction when embedding our web push SDK into your Vue web application.

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

To help you get started using our VueJS SDK, we've outlined some basic steps below. For more information, see the full OneSignal-Vue Github README guide.

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.