Nuxt.js集成OneSignal报错：Cannot read property 'push' of undefined，求排查

It looks like your $OneSignal instance isn't being properly initialized, which is why you're hitting that error. Let's walk through the common missing configuration steps and fixes:

1. Verify Your Nuxt Config Has Required OneSignal Settings #

First, make sure you've properly configured the OneSignal module in your nuxt.config.js under the pwa section. At minimum, you need to provide your OneSignal app ID (and Safari web ID if supporting Safari):

export default {
  modules: ['@nuxtjs/pwa'], // Don't forget this line!
  pwa: {
    onesignal: {
      appId: 'YOUR_ONESIGNAL_APP_ID', // Replace with your actual app ID
      safari_web_id: 'YOUR_SAFARI_WEB_ID', // Optional but required for Safari support
      autoRegister: true, // Enables automatic SDK initialization
      promptOptions: {
        // Optional: Customize the notification prompt behavior
      }
    }
  }
}

If you skip the appId, the module won't initialize the $OneSignal object at all, leading to the undefined error.

2. Ensure the PWA Module is Installed & Enabled #

Double-check that you've installed the @nuxtjs/pwa package:

npm install @nuxtjs/pwa
# Or with yarn
yarn add @nuxtjs/pwa

And confirm it's added to the modules array in nuxt.config.js (as shown in the config snippet above). Without this, the OneSignal module won't be loaded.

3. Only Call OneSignal Methods in the Client Context #

OneSignal is a browser-only SDK—if you try to access this.$OneSignal during server-side rendering (SSR), it will be undefined. Always wrap your OneSignal code in a check for the client environment, or use the mounted hook (which only runs on the client):

<script>
export default {
  mounted() {
    // mounted runs only in the browser, so $OneSignal is safe here
    this.$OneSignal.push(() => {
      this.$OneSignal.isPushNotificationsEnabled((isEnabled) => {
        if (isEnabled) {
          console.log('Push notifications are enabled!')
        } else {
          console.log('Push notifications are not enabled yet.')
        }
      })
    })
  }

  // If using created hook instead, add the client check:
  // created() {
  //   if (process.client) {
  //     this.$OneSignal.push(...)
  //   }
  // }
}
</script>

4. Wait for the SDK to Fully Load #

In rare cases, the OneSignal SDK might not be fully loaded when your code runs. Using $OneSignal.push() should handle this, but if you're still having issues, you can listen for the OneSignalSDKUpdater event or ensure your code runs after the app is mounted.

Common Mistake to Avoid #

A lot of people forget to set autoRegister: true in the OneSignal config—this ensures the SDK initializes automatically when the app loads. Without it, you'll have to manually initialize the SDK, which adds extra steps.

内容的提问来源于stack exchange，提问作者Ajay Yadav