Unable to avoid hard coding for one signal app_id in init.

[TakasiVenkataSandeep-08]

Hi, i am implementing onesignal integration in nuxt js but i am unable to replace the hardcoded one signal ids in nuxt config because i am unable to access environment variables while deploying.

currently my onesignal config looks like this:

oneSignal: {
    cdn: true,
    init: {
      appId: "hard-coded-id",
      safari_web_id: "hard-coded-id",
      allowLocalhostAsSecureOrigin: true,
      welcomeNotification: {
        disable: true,
      },
    }
  },

need to modify it like:

  oneSignal: {
    cdn: true,
    init: {
      appId: process.env.APP_ID,
      safari_web_id: process.env.SAFARI_WEB_ID,
      allowLocalhostAsSecureOrigin: true,
      welcomeNotification: {
        disable: true,
      },
    }
  },

is there any way out?

[fahmifitu]

I have been able to do it by using nuxt's extendPlugins to remove one-signal.js plugin then including my own one signal plugin which initiate the one signal instance with config from an api call.

[Gazoon007]

I have been able to do it by using nuxt's extendPlugins to remove one-signal.js plugin then including my own onesignal plugin which initiate the onesignal instance with config from an api call.

@fahmifitu Could you please elaborate with an example code, as I have a hard time understanding how to do it

[fahmifitu]

@Gazoon007

Sure thing. check below

// in nuxt.config.js, add:
extendPlugins(plugins) {
    // remove /one-signal.js
    return plugins.filter(
      ({ src }) => (src && !src.includes('/onesignal.js')) || !src
    )
},

// add a new nuxt plugin
window.$OneSignal = window.OneSignal = window.OneSignal || []

export default function ({ $axios }, inject) {
  $axios.get("EXAMPLE").then((RESPONSE) => {
    const init = {
      appId: RESPONSE.app_id,
      allowLocalhostAsSecureOrigin: true,
      autoRegister: true,
      autoResubscribe: true,
      notifyButton: {
        enable: false,
      },
    };

    window.OneSignal.push(['init', init])
    inject('OneSignal', window.OneSignal)
  })
}