Registry / communication / onesignal-vue

onesignal-vue

library2.7.0jsnpmunverified

The `onesignal-vue` package provides a specialized JavaScript module to seamlessly integrate OneSignal's push notification, in-app messaging, and analytics services into Vue 2 applications. It acts as a wrapper around the core OneSignal Web SDK, simplifying setup and API access within the Vue ecosystem. Currently at version 2.7.0, the library receives frequent minor and patch updates, indicating active maintenance and continuous improvement. Its primary differentiator is its targeted compatibility with Vue 2, offering a `Vue.use()` plugin interface and injecting the OneSignal API directly onto Vue instances as `$OneSignal`. For Vue 3 projects, a separate package, `onesignal-vue3`, is required due to breaking changes in Vue's plugin architecture.

communication llm-agents

npm install onesignal-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ONESIGNAL-VUE

onesignal-vue

communicationjavascriptv2.7.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

OneSignalVue

✓ import OneSignalVue from 'onesignal-vue';

✗ import { OneSignalVue } from 'onesignal-vue';

This is the default export used for `Vue.use()` plugin installation. For Vue 3, use `@onesignal/onesignal-vue3`.

$OneSignal

✓ this.$OneSignal.init({ appId: '...' });

✗ import { $OneSignal } from 'onesignal-vue';

Available as an instance property `this.$OneSignal` after the plugin is installed with `Vue.use()`. It provides access to the underlying OneSignal SDK methods.

IDisplayableOSNotification

✓ import { IDisplayableOSNotification } from 'onesignal-vue';

The package ships with TypeScript types. Specific interfaces like `IDisplayableOSNotification` are imported as named exports for type hinting and extending functionality.

Demonstrates how to install the `onesignal-vue` plugin and initialize the OneSignal SDK with an application ID in a Vue 2 application, then prompts the user for push notification permission.

import Vue from 'vue'; import App from './App.vue'; import OneSignalVue from 'onesignal-vue'; // Install the plugin globally Vue.use(OneSignalVue); new Vue({ render: (h) => h(App), beforeMount() { // Initialize OneSignal with your App ID // Replace 'YOUR_ONESIGNAL_APP_ID' with your actual OneSignal Application ID this.$OneSignal.init({ appId: 'YOUR_ONESIGNAL_APP_ID' }) .then(() => { console.log('OneSignal initialized successfully.'); // Example: Prompt the user for push notification permission this.$OneSignal.User.PushSubscription.optIn(); }) .catch(error => { console.error('OneSignal initialization failed:', error); }); }, }).$mount('#app');

Debug

Known issues

breakingThis plugin is specifically designed for Vue 2 applications. Using it directly with Vue 3 will lead to incompatibility issues and runtime errors. Vue 3 users should use the `@onesignal/onesignal-vue3` package instead.

fix

For Vue 3 projects, install `@onesignal/onesignal-vue3` (`npm install --save @onesignal/onesignal-vue3`) instead of `onesignal-vue`.

affects: >=2.0.0

breakingUsers migrating from `onesignal-vue` v1.x to v2.x should consult the official migration guide as there are breaking API changes and compatibility considerations.

fix

Refer to the `MigrationGuide.md` in the project repository for detailed steps and necessary code adjustments when upgrading from version 1.

affects: >=2.0.0

gotchaThe `this.$OneSignal.init()` method returns a Promise. It is crucial to either `await` its resolution or use `.then()` to ensure OneSignal is fully loaded and initialized before attempting to call other SDK methods, otherwise, subsequent methods might fail or return undefined.

fix

Ensure that subsequent OneSignal API calls are placed inside the `.then()` block of the `init` promise or after an `await this.$OneSignal.init()` call.

affects: >=2.0.0

gotchaFor proper TypeScript code completion and type inference within Vue components, you may need to explicitly import the plugin even if it's already installed globally via `Vue.use()`.

fix

Add `import OneSignalVue from 'onesignal-vue';` to the `<script>` section of your `.vue` components where you use `this.$OneSignal`.

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading '$OneSignal')

The `onesignal-vue` plugin was not installed with `Vue.use()` before the Vue instance was created, or the application is running on Vue 3 which is incompatible.

fix

Ensure `Vue.use(OneSignalVue)` is called before creating your Vue instance, typically in `main.js` or `app.js`. Also, verify you are using Vue 2 and not Vue 3 with this package.

Uncaught (in promise) Error: You must include an appId

The `appId` property was omitted or an invalid `appId` string was provided to the `this.$OneSignal.init()` method.

fix

Verify that `appId` is correctly passed to `this.$OneSignal.init({ appId: 'YOUR_ONESIGNAL_APP_ID' })` and that it is a valid OneSignal Application ID from your dashboard.

Type 'typeof import(".../onesignal-vue")' has no property '$OneSignal'.

TypeScript compiler cannot infer the `$OneSignal` property on the Vue instance, often due to missing type declarations or incorrect project setup.

fix

Ensure your project's `shims-vue.d.ts` or a similar declaration file extends Vue's `ComponentCustomProperties` interface to include `$OneSignal`, or import the plugin within your component's script block for local type inference.

Upgrade

Version history

2.7.0latest on npm

Audit

Dependencies

vuerequiredRuntime dependency for Vue 2 applications, as this plugin specifically targets Vue 2.

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/OneSignal/onesignal-vue ↗

packagehttps://www.npmjs.com/package/onesignal-vue ↗

homepagehttps://onesignal.com ↗