{"id":19251016,"url":"https://github.com/onesignal/onesignal-vue","last_synced_at":"2026-05-20T21:03:16.608Z","repository":{"id":38183866,"uuid":"388942781","full_name":"OneSignal/onesignal-vue","owner":"OneSignal","description":"Vue OneSignal Plugin: Make it easy to integrate OneSignal with your Vue App!","archived":false,"fork":false,"pushed_at":"2023-08-31T22:26:34.000Z","size":96,"stargazers_count":13,"open_issues_count":5,"forks_count":3,"subscribers_count":34,"default_branch":"main","last_synced_at":"2024-11-09T08:48:55.027Z","etag":null,"topics":["email","in-app-messaging","notifications","onesignal","push","push-notifications","sms","vue","vuejs","web"],"latest_commit_sha":null,"homepage":"","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":null,"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":"2021-07-23T22:36:54.000Z","updated_at":"2024-05-22T15:56:50.000Z","dependencies_parsed_at":"2023-02-10T11:05:17.869Z","dependency_job_id":null,"html_url":"https://github.com/OneSignal/onesignal-vue","commit_stats":{"total_commits":33,"total_committers":5,"mean_commits":6.6,"dds":0.2727272727272727,"last_synced_commit":"fae43e1cfbf73cf04758c4096485f3d9e94f3063"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneSignal%2Fonesignal-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneSignal%2Fonesignal-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneSignal%2Fonesignal-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneSignal%2Fonesignal-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OneSignal","download_url":"https://codeload.github.com/OneSignal/onesignal-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223864863,"owners_count":17216422,"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":["email","in-app-messaging","notifications","onesignal","push","push-notifications","sms","vue","vuejs","web"],"created_at":"2024-11-09T18:19:38.010Z","updated_at":"2026-05-20T21:03:16.601Z","avatar_url":"https://github.com/OneSignal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eWelcome to onesignal-vue 👋\u003c/h1\u003e\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/onesignal-vue\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/onesignal-vue.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/OneSignal/onesignal-vue#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-vue/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-vue)\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) if coming from v1.\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                                                 |\n| 3   | [onesignal-vue3](https://github.com/OneSignal/onesignal-vue3) |\n\n---\n\n## Install\n\n### npm\n\n```bash\nnpm install --save onesignal-vue\n```\n\n### Yarn\n\n```bash\nyarn add onesignal-vue\n```\n\n---\n\n## Usage\n\n## Plugin setup\n\n```js\nimport Vue from 'vue';\nimport OneSignalVue from 'onesignal-vue';\n\nVue.use(OneSignalVue);\n```\n\nInitialize OneSignal with your `appId` via the `options` parameter:\n\n```js\nnew Vue({\n  render: (h) =\u003e h(App),\n  beforeMount() {\n    this.$OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });\n  },\n}).$mount('#app');\n```\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### Code completion\n\nFor code completion to work correctly, make sure you import the plugin (e.g: in child components).\n\n```vue\n\u003cscript\u003e\nexport default {\n  name: 'HelloWorld',\n  props: {\n    msg: String,\n  },\n  beforeCreate() {\n    // Example prompting for notification permission\n    this.$OneSignal.User.PushSubscription.optIn();\n  },\n};\n\u003c/script\u003e\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#custom-code-setup).\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/onesignal-service-worker#upload-the-js-file-to-your-server)).\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---\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-reference) 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('click', (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-notifications) 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-vue/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 © 2022 [OneSignal](https://github.com/OneSignal).\u003cbr /\u003e\nThis project is [Modified MIT](https://github.com/OneSignal/onesignal-vue/blob/main/LICENSE) licensed.\n\nEnjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonesignal%2Fonesignal-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonesignal%2Fonesignal-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonesignal%2Fonesignal-vue/lists"}