Plugin isn't compatible with Vuejs 3

[iAmWillShepherd]

I'm trying to get up and running with the plugin on Vuejs 3 and getting this error 👇🏾

Uncaught TypeError: app.prototype is undefined
    install index.es.js:9231
    use runtime-core.esm-bundler.js:3110
    <anonymous> main.js:6
    js app.js:1148
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1161
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonymous> app.js:925
    <anonymous> app.js:928
index.es.js:9231

I did some digging and found the origin of the error:

The property being accessed is undefined.

This is because Vue 3 expects global instance methods to be attached to config.globalProperties:

Instead of prototype in Vue2:

It seems the problem can be solved in three ways:

1. Update the docs indicating the plugin is only compatible with Vue 2
2. Migrate the plugin to use Vue 3
3. Add support for Vue 3 for the current plugin

[iAmWillShepherd]

As an aside, if we do support Vue 3, the setup guide needs to be updated to something like:

import { createApp } from "vue";
import App from "./App.vue";
import OneSignalVue from "onesignal-vue";

const app = createApp(App);
app.use(OneSignalVue);
app.mount("#app");

I'm still unsure how to actually initialize OneSignal since the plugin currently uses a lifecycle hook.

[bsileo]

I am interested in Vue3 compatibility as well. Will do some digging to see if i can get this to work.

[XanderTenBoden]

I've made a temporary workaround for using this plugin with vue3 which can be found here:

https://github.com/K-Bit-dev/onesignal-vue-3

It would be nice if OneSignal made an vue3 version as well though. This changes cost me 10 minutes max...

[rgomezp]

@XanderTenBoden, Thanks for doing that. It looks like you removed an important module declaration, however. I've played around with this myself and found that the equivalent Vue 3 implementation would be:

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $OneSignal: IOneSignal
  }
}

However, I haven't been able to get VSCode to pick up the custom property and type definitions so code completion is not working.

Also, it would be my preference to keep OneSignal as a custom component property (e.g: $OneSignal) as opposed to importing some sort of getter. However, I'm open to feedback from the community -- above all from people very involved in the Vue ecosystem and Vue 3 in particular.

[namoscato]

👋🏻 @rgomezp, did you sort this out? I saw your SO comment and figured I would just followup in here.

it would be my preference to keep OneSignal as a custom component property (e.g: $OneSignal) as opposed to importing some sort of getter

I'm not really familiar with this plugin, but I do have some experience with Vue 3 plugins. In addition to the global $OneSignal property, you might also consider supporting Composition API dependency injection via a useOneSignal wrapper, similar to what I did in https://github.com/vue-gapi/vue-gapi/pull/306.

[rgomezp]

@namoscato thanks for the reply. Yes I did fix it but it was a bunch of trial and error and to be honest I still don't know why intellisense wasn't working or what fixed it.

In terms of the getter, this is good feedback because we can add it in. I'll take a look at your example. Thanks.

If there is any other feedback, please drop it below.

[rgomezp]

This is now resolved via https://github.com/OneSignal/onesignal-vue3