Installation steps are incomplete

[iAmWillShepherd]

While building the sample app for this, I ran into an issue dealing with OneSignal dependencies. Specifically, I received an error stating that the onesignal-vue dependency couldn't be found.

Running without installing oneesignal-vue first

╭─iamwill@kronos ~/code/@onesignalDevelopers/onesignal-vue3-sample/OneSignal-Vue-Sample ‹main●› 
╰─$ yarn serve
yarn run v1.22.18
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                        10:00:00 AM

This dependency was not found:

* onesignal-vue in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/App.vue?vue&type=script&lang=js

To install it, you can run: npm install --save onesignal-vue

Installing the onesignal-vue plugin resolves the issue, but we should either

• State that onesignal-vue is required in addition to @onesignal/onesignal-vue3
• or Install the dependency as part of @onesignal/onesignal-vue3's installation

[iAmWillShepherd]

Installing vue doesn't completely solve the problem, the OneSignal plugin emits a warning stating that no default export was found in vue.

Compiling after installing vue

 WARNING  Compiled with 1 warning                                                                             10:23:26 AM

 warning  in ./node_modules/onesignal-vue/dist/index.js

"export 'default' (imported as 'Vue') was not found in 'vue'

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.2.124:8080/

Some other issues I encountered:

No code hinting, even when I import OneSignal within a Vue component

<script>
import OneSignal from 'onesignal-vue'
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  beforeCreate() {
    this.$OneSignal.showSlidedownPrompt()
  }
}
</script>

OneSignal is not setup correctly

Here is my main.js file where I set up OneSignal.

import { createApp } from 'vue'
import OneSignal from '@onesignal/onesignal-vue3'
import App from './App.vue'
import { _OneSignalAppId_ } from './common/constants'

const app = createApp(App, {
  productionTip: false
})

app.use(OneSignal, {
  appId: _OneSignalAppId_,
  allowLocalhostAsSecureOrigin: true
})

app.mount('#app')

[iAmWillShepherd]

@jmadler thinks this may be a packaging issue, a good starting point for root-cause analysis (RCA).

[rgomezp]

Hello, Thank you.

Installing the onesignal-vue plugin resolves the issue, but we should either State that onesignal-vue is required in addition to @onesignal/onesignal-vue3 or Install the dependency as part of @onesignal/onesignal-vue3's installation

onesignal-vue is not required for onesignal-vue3.

Make sure you're not mixing them up.

import OneSignal from 'onesignal-vue'

Make sure you're importing from 'onesignal-vue3' as they are different.

No code hinting, even when I import OneSignal within a Vue component

Are you using Vetur?

may be a packaging issue

I don't think so. See my comments above for guidance.

[rgomezp]

Closing since this is tracked internally

[iAmWillShepherd]

Updating the package worked (https://github.com/OneSignalDevelopers/onesignal-vue3-sample/commit/25d44266f996e7011d9537b1325c23d203a35512); I no longer get the initialization error, and code-hinting now works!

App running (note the cookie issues)

Everything appears to be working, but I did notice these errors pop up regarding our cookies.