{"_id":"@cepicdalim/onesignal-vue3","name":"@cepicdalim/onesignal-vue3","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.1":{"name":"@cepicdalim/onesignal-vue3","version":"2.0.1","description":"Vue 3 OneSignal Plugin: Make it easy to integrate OneSignal with your Vue App!","author":{"name":"rgomezp"},"contributors":[{"name":"Rodrigo Gomez-Palacio"},{"name":"Enzo Innocenzi"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/OneSignal/onesignal-vue3.git"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"lint":"eslint **/*.ts","build":"yarn run lint && tsc","prepare":"yarn run build"},"dependencies":{"vue":"^3.2.0"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^5.20.0","@typescript-eslint/parser":"^5.20.0","eslint":"^8.13.0","eslint-plugin-vue":"^9.17.0","typescript":"^4.6.3"},"keywords":["onesignal","push","notification","push notification","vue"],"directories":{"example":"example"},"bugs":{"url":"https://github.com/OneSignal/onesignal-vue3/issues"},"homepage":"https://github.com/OneSignal/onesignal-vue3#readme","_id":"@cepicdalim/onesignal-vue3@2.0.1","gitHead":"097a0961992a72cb8606be83fe6dd5876f4e8f07","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-SJsHcTSGoPoLhsI7dmUqAWBXDqJht6tmPxe9LuGsa+jsci7zzIVBb8351fUXfAzi+NebHV6rAK/12oapncHutQ==","shasum":"9f31e2935be5eb824197af89607fd3a0fed537e1","tarball":"https://registry.npmjs.org/@cepicdalim/onesignal-vue3/-/onesignal-vue3-2.0.1.tgz","fileCount":22,"unpackedSize":108104,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdrTmXZ40E/0VAN8dFGofOF41RxT0QCJWcH4y5V2rw2AiAVmYMrZlWctWpWmTPyeGk67yx70ReG7XEAJl0SoRS3yg=="}]},"_npmUser":{"name":"cepicdalim","email":"cepicdalim@gmail.com"},"maintainers":[{"name":"cepicdalim","email":"cepicdalim@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/onesignal-vue3_2.0.1_1728232673266_0.46872326417503296"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-06T16:37:53.202Z","2.0.1":"2024-10-06T16:37:53.549Z","modified":"2024-10-06T16:37:53.774Z"},"maintainers":[{"name":"cepicdalim","email":"cepicdalim@gmail.com"}],"description":"Vue 3 OneSignal Plugin: Make it easy to integrate OneSignal with your Vue App!","homepage":"https://github.com/OneSignal/onesignal-vue3#readme","keywords":["onesignal","push","notification","push notification","vue"],"repository":{"type":"git","url":"git+https://github.com/OneSignal/onesignal-vue3.git"},"contributors":[{"name":"Rodrigo Gomez-Palacio"},{"name":"Enzo Innocenzi"}],"author":{"name":"rgomezp"},"bugs":{"url":"https://github.com/OneSignal/onesignal-vue3/issues"},"license":"MIT","readme":"

welcome to onesignal-vue3 👋

\n

\n \n \"Version\"\n \n \n \"Documentation\"\n \n \n \"Maintenance\"\n \n \n \"Twitter:\n \n

\n\n> This is a JavaScript module that can be used to easily include [OneSignal](https://onesignal.com/) code in a website or app that uses Vue for its front-end codebase.\n\n* 🏠 [Homepage](https://onesignal.com)\n* 🖤 [npm](https://www.npmjs.com/package/@onesignal/onesignal-vue3)\n\nOneSignal is the world's leader for Mobile Push Notifications, Web Push, and In-App Messaging. It is trusted by 2 million+ businesses to send 9 billion Push Notifications per day.\n\nYou can find more information on OneSignal [here](https://onesignal.com/).\n\n> Upgrading from Version 1?\nSee our [migration guide](./MigrationGuide.md) to get started with v2.\n\n## Contents\n- [Install](#install)\n- [Usage](#usage)\n- [API](#onesignal-api)\n- [Advanced Usage](#advanced-usage)\n\n---\n## Vue Compatibility\nMake sure you install a plugin version compatible with your Vue environment.\n\n| Vue | OneSignal Plugin |\n|-----|------------------|\n| 2 | [onesignal-vue](https://github.com/OneSignal/onesignal-vue) |\n| 3 | onesignal-vue3 |\n\n## Install\n\nYou can use `yarn` or `npm`.\n\n\n### Yarn\n\n```bash\nyarn add @onesignal/onesignal-vue3\n```\n\n### npm\n\n```bash\nnpm install --save @onesignal/onesignal-vue3\n```\n\n---\n## Usage\n\n## Plugin setup\n\nIn Vue 3, you can pass in the OneSignal initialization options directly as an argument to the `use` function. You can still initialize separately if you prefer editor benefits like code-completion.\n\n```js\n// main\nimport { createApp } from 'vue'\nimport OneSignalVuePlugin from '@onesignal/onesignal-vue3'\n\ncreateApp(App).use(OneSignalVuePlugin, {\n appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',\n}).mount('#app');\n\n```\nor\n\n```js\n//main\nimport { createApp } from 'vue'\nimport OneSignalVuePlugin from '@onesignal/onesignal-vue3'\n\ncreateApp(App).use(OneSignalVuePlugin).mount('#app');\n\n// component\nthis.$OneSignal.init({\n appId: \"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\"\n});\n\n```\n\nThe OneSignal plugin automatically exposes a `$OneSignal` global property accessible inside the application.\n\n### Composition API\n\nYou can also leverage Vue's [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) via the `useOneSignal` function that can be called from within [`setup`](https://vuejs.org/api/composition-api-setup.html#basic-usage).\n\n## Reference\n### Initialization\nThe `init` function returns a promise that resolves when OneSignal is loaded.\n\n**Examples**\n```js\nawait this.$OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });\n// do other stuff\n```\n\n```js\nthis.$OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }).then(() => {\n // do other stuff\n});\n```\n\n### Init Options\nYou can pass other [options](https://documentation.onesignal.com/v11.0/docs/web-sdk#initializing-the-sdk) to the `init` function. Use these options to configure personalized prompt options, auto-resubscribe, and more.\n\n
\n Expand to see more options\n\n | Property Name | Type | Description |\n| ---------------------------| --------------------- | -------------------------------------------------- |\n| `appId` | `string` | The ID of your OneSignal app. |\n| `autoRegister` | `boolean` (optional) | Whether or not to automatically register the user. |\n| `autoResubscribe` | `boolean` (optional) | Whether or not to automatically resubscribe the user. |\n| `path` | `string` (optional) | The path to the OneSignal service worker file. |\n| `serviceWorkerPath` | `string` (optional) | The path to the OneSignal service worker script. |\n| `serviceWorkerUpdaterPath` | `string` (optional) | The path to the OneSignal service worker updater script. |\n| `subdomainName` | `string` (optional) | The subdomain of your OneSignal app. |\n| `allowLocalhostAsSecureOrigin` | `boolean` (optional) | Whether or not to allow localhost as a secure origin. |\n| `requiresUserPrivacyConsent`| `boolean` (optional) | Whether or not the user's consent is required. |\n| `persistNotification` | `boolean` (optional) | Whether or not notifications should persist. |\n| `notificationClickHandlerMatch`| `string` (optional) | The URL match pattern for notification clicks. |\n| `notificationClickHandlerAction`| `string` (optional)| The action to perform when a notification is clicked. |\n| `welcomeNotification` | `object` (optional) | The welcome notification configuration. |\n| `notifyButton` | `object` (optional) | The notify button configuration. |\n| `promptOptions` | `object` (optional) | Additional options for the subscription prompt. |\n| `webhooks` | `object` (optional) | The webhook configuration. |\n| `[key: string]` | `any` | Additional properties can be added as needed. |\n\n**Service Worker Params**\nYou can customize the location and filenames of service worker assets. You are also able to specify the specific scope that your service worker should control. You can read more [here](https://documentation.onesignal.com/docs/onesignal-service-worker-faq#sdk-parameter-reference-for-service-workers).\n\nIn this distribution, you can specify the parameters via the following:\n\n| Field | Details |\n|----------------------------|------------------------------------------------------------------------------------------------------------------------|\n| `serviceWorkerParam` | Use to specify the scope, or the path the service worker has control of. Example: `{ scope: \"/js/push/onesignal/\" }` |\n| `serviceWorkerPath` | The path to the service worker file. |\n\n
\n\n---\n\n### Service Worker File\nIf you haven't done so already, you will need to add the [OneSignal Service Worker file](https://github.com/OneSignal/OneSignal-Website-SDK/files/7585231/OneSignal-Web-SDK-HTTPS-Integration-Files.zip) to your site ([learn more](https://documentation.onesignal.com/docs/web-push-quickstart#step-6-upload-files)).\n\nThe OneSignal SDK file must be publicly accessible. You can put them in your top-level root or a subdirectory. However, if you are placing the file not on top-level root make sure to specify the path via the service worker params in the init options (see section above).\n\n**Tip:**\nVisit `https://yoursite.com/OneSignalSDKWorker.js` in the address bar to make sure the files are being served successfully.\n\n### Code completion\nIf IntelliSense is not working as expected in your `.vue` file, try adding an import from the OneSignal plugin.\n\n![intellisense](https://user-images.githubusercontent.com/11739227/164801900-96592534-f991-49e0-ba36-e02bb04f31b8.png)\n\n### Typescript\nThis package includes Typescript support.\n\n```ts\ninterface IOneSignalOneSignal {\n\tSlidedown: IOneSignalSlidedown;\n\tNotifications: IOneSignalNotifications;\n\tSession: IOneSignalSession;\n\tUser: IOneSignalUser;\n\tDebug: IOneSignalDebug;\n\tlogin(externalId: string, jwtToken?: string): Promise;\n\tlogout(): Promise;\n\tinit(options: IInitObject): Promise;\n\tsetConsentGiven(consent: boolean): Promise;\n\tsetConsentRequired(requiresConsent: boolean): Promise;\n}\n```\n\n### OneSignal API\nSee the official [OneSignal WebSDK reference](https://documentation.onesignal.com/v11.0/docs/web-sdk) for information on all available SDK functions.\n\n---\n## Advanced Usage\n### Events and Event Listeners\nUse listeners to react to OneSignal-related events:\n\n### Notifications Namespace\n| Event Name | Callback Argument Type |\n|-|-|\n|'click' | NotificationClickEvent|\n|'foregroundWillDisplay'| NotificationForegroundWillDisplayEvent\n| 'dismiss'| NotificationDismissEvent|\n|'permissionChange'| boolean|\n|'permissionPromptDisplay'| void|\n\n### Slidedown Namespace\n| Event Name | Callback Argument Type |\n|-|-|\n|'slidedownShown' | boolean |\n\n### Push Subscription Namespace\n| Event Name | Callback Argument Type |\n|-|-|\n|'change' | boolean |\n\n**Example**\n```js\nthis.$OneSignal.Notifications.addEventListener('change', (event) => {\n console.log(\"The notification was clicked!\", event);\n});\n```\n\nSee the [OneSignal WebSDK Reference](https://documentation.onesignal.com/v11.0/docs/web-sdk) for all available event listeners.\n\n---\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/OneSignal/onesignal-vue3/issues).\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n\n## OneSignal\n\n* [Website](https://onesignal.com)\n* Twitter: [@onesignal](https://twitter.com/onesignal)\n* Github: [@OneSignal](https://github.com/OneSignal)\n* LinkedIn: [@onesignal](https://linkedin.com/company/onesignal)\n\n## Discord\nReach out to us via our [Discord server](https://discord.com/invite/EP7gf6Uz7G)!\n\n## 📝 License\n\nCopyright © 2023 [OneSignal](https://github.com/OneSignal).
\nThis project is [Modified MIT](https://github.com/OneSignal/onesignal-vue3/blob/main/LICENSE) licensed.\n\n\nEnjoy!\n","readmeFilename":"README.md"}