[question]: one signal sdk and nuxt 3

[djixadin]

How can we help?

i try to integrate this plugin into my nuxt 3.6 project... i tried both 1.0.2 version and the latest beta v2.beta5 with no success..

first i created one-signal.ts file in plugins directory and i got window is not defined error.
then i renamed the file to one-signal.client.ts so its only a client side plugin and it got initialized.

import OneSignalVuePlugin from '@onesignal/onesignal-vue3'

export default defineNuxtPlugin((nuxtApp) => {
  const { oneSignalAppId } = useAppConfig()

  nuxtApp.vueApp.use(OneSignalVuePlugin, {
    appId: oneSignalAppId
  })
})

now the method is different and when i call useOneSignal() hook i get undefined... nuxt 3 plugins has a return with provide that i can use to return the instance but theres nothing for me to return here and this doesnt mount itself on the vue instance

[djixadin]

i try to init it this way but this doesnt return anything

  OneSignalVuePlugin.install(nuxtApp.vueApp, {
    appId: oneSignalAppId
  })

[djixadin]

for anyone wondering here i solved it like this... create a file called one-signal.client.ts in plugins folder

import OneSignalVuePlugin, { useOneSignal } from '@onesignal/onesignal-vue3'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(OneSignalVuePlugin, {
    appId: 'YOUR_APP_ID'
  })

  return {
    provide: {
      oneSignal: useOneSignal()
    }
  }
})

[ColinTravis]

@djixadin
Hmm, you said you got this to work. Is it still throwing window not defined errors?

I've tried the same file in a nuxt 3.6 project, calling both useOneSignal() as well as just oneSignal() and both still return undefined.

[dhaladitya108]

import { useOneSignal } from '@onesignal/onesignal-vue3'

export default defineNuxtPlugin((nuxtApp) => {
  const appId = nuxtApp.$config.public.ONESIGNAL_APP_ID

  if (!appId) {
    return
  }

  const OneSignal = useOneSignal()

  OneSignal.init({
    appId,
    allowLocalhostAsSecureOrigin: true
  })

  return {
    provide: {
      OneSignal
    }
  }
})

@ColinTravis this worked for me.

[lokeshparmar998]

I am using oneSignal with capacitor in my nuxt 3 project this is how I am doing it

import OneSignal from "onesignal-cordova-plugin";
export default {
  setup() {
   
    onMounted(() => {
      setupMobilePushNotification("Unique userID");
    });

    async function setupMobilePushNotification(userId: string) {
      const isNativeDevice = await useCapacitorIsNativeDevice(); // functions which returns true for native device
      if(isNativeDevice)
      {
        OneSignal.initialize("APP_ID");
        OneSignal.login(userId); // unique userId
        OneSignal.Notifications.requestPermission();
      }
    }

    return {
    };
  }
}
</script>```