{"id":13810516,"url":"https://github.com/OneSignal/onesignal-vue3","last_synced_at":"2025-05-14T10:33:52.507Z","repository":{"id":37842510,"uuid":"486328891","full_name":"OneSignal/onesignal-vue3","owner":"OneSignal","description":"Vue 3 OneSignal Plugin: Make it easy to integrate OneSignal with your Vue App!","archived":false,"fork":false,"pushed_at":"2025-03-28T18:59:07.000Z","size":409,"stargazers_count":21,"open_issues_count":4,"forks_count":5,"subscribers_count":30,"default_branch":"main","last_synced_at":"2025-05-08T05:44:39.879Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OneSignal.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-27T19:42:12.000Z","updated_at":"2025-03-28T18:05:51.000Z","dependencies_parsed_at":"2025-04-09T20:05:11.707Z","dependency_job_id":"842ab9cf-49de-427a-a134-25b301029b40","html_url":"https://github.com/OneSignal/onesignal-vue3","commit_stats":{"total_commits":13,"total_committers":3,"mean_commits":4.333333333333333,"dds":0.3076923076923077,"last_synced_commit":"bad77c052f931a9df40f7e32a99f3eabb58baf35"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneSignal%2Fonesignal-vue3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneSignal%2Fonesignal-vue3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneSignal%2Fonesignal-vue3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneSignal%2Fonesignal-vue3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OneSignal","download_url":"https://codeload.github.com/OneSignal/onesignal-vue3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254001609,"owners_count":21997606,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T02:00:57.476Z","updated_at":"2025-05-14T10:33:47.491Z","avatar_url":"https://github.com/OneSignal.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ewelcome to onesignal-vue3 👋\u003c/h1\u003e\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/onesignal-vue3\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/onesignal-vue3.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/OneSignal/onesignal-vue3#readme\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/OneSignal/onesignal-vue3/graphs/commit-activity\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/onesignal\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Twitter: onesignal\" src=\"https://img.shields.io/twitter/follow/onesignal.svg?style=social\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e 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\u003e 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(() =\u003e {\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\u003cdetails\u003e\n  \u003csummary\u003eExpand to see more options\u003c/summary\u003e\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\u003c/details\u003e\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\u003cvoid\u003e;\n\tlogout(): Promise\u003cvoid\u003e;\n\tinit(options: IInitObject): Promise\u003cvoid\u003e;\n\tsetConsentGiven(consent: boolean): Promise\u003cvoid\u003e;\n\tsetConsentRequired(requiresConsent: boolean): Promise\u003cvoid\u003e;\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) =\u003e {\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!\u003cbr /\u003eFeel 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).\u003cbr /\u003e\nThis project is [Modified MIT](https://github.com/OneSignal/onesignal-vue3/blob/main/LICENSE) licensed.\n\n\nEnjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOneSignal%2Fonesignal-vue3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOneSignal%2Fonesignal-vue3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOneSignal%2Fonesignal-vue3/lists"}