Closed iAmWillShepherd closed 2 years ago
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.
I am interested in Vue3 compatibility as well. Will do some digging to see if i can get this to work.
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...
@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.
👋🏻 @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.
@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.
This is now resolved via https://github.com/OneSignal/onesignal-vue3
I'm trying to get up and running with the plugin on Vuejs 3 and getting this error 👇🏾
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: