{"id":19251036,"url":"https://github.com/onesignal/onesignal-vue3","last_synced_at":"2025-12-27T04:20:32.429Z","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-04-09T20:04:54.003Z","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-03-13T02:31:46.628Z","dependency_job_id":null,"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":10,"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":248103868,"owners_count":21048245,"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-11-09T18:19:42.783Z","updated_at":"2025-12-27T04:20:32.421Z","avatar_url":"https://github.com/OneSignal.png","language":"TypeScript","funding_links":[],"categories":[],"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/onesignal-vue3\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/@onesignal/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+ developers to send 12 billion Push Notifications per day.\n\nYou can find more information on OneSignal [here](https://onesignal.com/).\n\n\u003e Upgrading from Version 1?\n\u003e See our [migration guide](./MigrationGuide.md) to get started with v2.\n\n## Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [API](#onesignal-api)\n- [Advanced Usage](#advanced-usage)\n\n---\n\n## Vue Compatibility\n\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\nRun `npm install`\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### Yarn\n\n```bash\nyarn add @onesignal/onesignal-vue3\n```\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)\n  .use(OneSignalVuePlugin, {\n    appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',\n  })\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\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\n### Initialization\n\nThe `init` function returns a promise that resolves when OneSignal is loaded.\n\n**Examples**\n\n```js\nawait this.$OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });\n// do other stuff\n```\n\n```js\nthis.$OneSignal\n  .init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' })\n  .then(() =\u003e {\n    // do other stuff\n  });\n```\n\n### Init Options\n\nYou can pass other [options](https://documentation.onesignal.com/docs/web-sdk-reference#init) 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\n\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/11480764/OneSignalSDK-v16-ServiceWorker.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\n\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\n\nThis package includes Typescript support.\n\n```ts\ninterface IOneSignalOneSignal {\n  Slidedown: IOneSignalSlidedown;\n  Notifications: IOneSignalNotifications;\n  Session: IOneSignalSession;\n  User: IOneSignalUser;\n  Debug: IOneSignalDebug;\n  login(externalId: string, jwtToken?: string): Promise\u003cvoid\u003e;\n  logout(): Promise\u003cvoid\u003e;\n  init(options: IInitObject): Promise\u003cvoid\u003e;\n  setConsentGiven(consent: boolean): Promise\u003cvoid\u003e;\n  setConsentRequired(requiresConsent: boolean): Promise\u003cvoid\u003e;\n}\n```\n\n### OneSignal API\n\nSee the official [OneSignal WebSDK reference](https://documentation.onesignal.com/docs/web-sdk) for information on all available SDK functions.\n\n---\n\n## Advanced Usage\n\n### Events and Event Listeners\n\nUse listeners to react to OneSignal-related events:\n\n### Notifications Namespace\n\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\n| Event Name       | Callback Argument Type |\n| ---------------- | ---------------------- |\n| 'slidedownShown' | boolean                |\n\n### Push Subscription Namespace\n\n| Event Name | Callback Argument Type |\n| ---------- | ---------------------- |\n| 'change'   | boolean                |\n\n**Example**\n\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/docs/web-sdk-reference#addeventlistener-push-notification) 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\n\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\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"}