{"id":15295040,"url":"https://github.com/nolde/vue-plugin-events","last_synced_at":"2025-04-13T15:57:07.523Z","repository":{"id":35016496,"uuid":"174637780","full_name":"nolde/vue-plugin-events","owner":"nolde","description":"Simple global event bus for Vue.js applications with automatic subscription control.","archived":false,"fork":false,"pushed_at":"2022-12-08T16:28:10.000Z","size":454,"stargazers_count":5,"open_issues_count":13,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T06:51:14.505Z","etag":null,"topics":["browser","event-bus","events","javascript","plugin","rollup","vue","vue-plugin","vue2","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/nolde.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}},"created_at":"2019-03-09T02:16:29.000Z","updated_at":"2020-08-24T23:27:52.000Z","dependencies_parsed_at":"2023-01-15T12:05:14.316Z","dependency_job_id":null,"html_url":"https://github.com/nolde/vue-plugin-events","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolde%2Fvue-plugin-events","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolde%2Fvue-plugin-events/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolde%2Fvue-plugin-events/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolde%2Fvue-plugin-events/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nolde","download_url":"https://codeload.github.com/nolde/vue-plugin-events/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741158,"owners_count":21154251,"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":["browser","event-bus","events","javascript","plugin","rollup","vue","vue-plugin","vue2","vuejs","vuejs2"],"created_at":"2024-09-30T17:08:23.342Z","updated_at":"2025-04-13T15:57:07.503Z","avatar_url":"https://github.com/nolde.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","Utilities [🔝](#readme)"],"sub_categories":["Utilities"],"readme":"Vue.js Events Plugin\n====================\n\n[![npm version](https://img.shields.io/npm/v/vue-plugin-events.svg?style=flat-square)](https://www.npmjs.com/package/vue-plugin-events)\n[![vue 2.x](https://img.shields.io/badge/vue-2.x-darkgreen.svg?style=flat-square)](https://vuejs.org/)\n[![build status](https://img.shields.io/circleci/build/gh/nolde/vue-plugin-events/master.svg?style=flat-square)](https://circleci.com/gh/nolde/vue-plugin-events)\n[![minzipped size](https://img.shields.io/bundlephobia/minzip/vue-plugin-events?style=flat-square)](https://bundlephobia.com/result?p=vue-plugin-events)\n[![code style: standard + prettier](https://img.shields.io/badge/code%20style-standard%20%2B%20prettier-ff69b4.svg?style=flat-square)](https://standardjs.com/)\n\n\u003e Simple global event bus for Vue.js applications with automatic subscription control. Zero dependencies.\n\n----------------\n\n- [Installation](#installation)\n- [Setup](#setup)\n    + [Bundler](#bundler-webpack-rollup)\n    + [Browser](#browser)\n- [Usage](#usage)\n    + [Listening to Events](#listening-to-events)\n    + [Emitting Events](#emitting-events)\n- [API (`$events`)](#api-events)\n- [License](#license)\n\n----------------\n\nInstallation\n------------\n```bash\nnpm install --save vue-plugin-events\n```\n\nSetup\n-----\n### Bundler (Webpack, Rollup)\n```js\nimport Vue from 'vue'\nimport VueEvents from 'vue-plugin-events'\n\nVue.use(VueEvents)\n```\n\n### Browser\n```html\n\u003c!-- Include after Vue --\u003e\n\u003c!-- Local files --\u003e\n\u003cscript src=\"vue-plugin-events/dist/vue-plugin-events.umd.js\"\u003e\u003c/script\u003e\n\n\u003c!-- From CDN --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-plugin-events\"\u003e\u003c/script\u003e\n```\n\nUsage\n-----\n\n### Listening to Events\n\nThe plugin will automatically subscribe a component to events defined within its body. This is achieved using a new section named `events`. When your component is destroyed, so are any listeners that have been automatically created.\n\nThe handlers follow a pattern similar to component [`watch`](https://vuejs.org/v2/api/#watch) section.\n\n```js\n// MyComponent.vue\nexport default {\n  data: () =\u003e ({\n    myValue: 'anything'\n  }),\n  methods: {\n    doSomething (arg) { /*...*/ }\n  },\n  events: {\n\n    // will execute method `doSomething` when event named `someEvent` is emitted\n    someEvent: 'doSomething',\n\n    // will fire when event named `someHandledEvent` is emitted\n    someHandledEvent (v) {\n      this.doSomething(v)\n    },\n\n    // will fire when event named `immediateEvent` is emitted, and as\n    // soon as the component is loaded and this section is evaluated,\n    // much like `immediate` option from watchers\n    immediateEvent: {\n      immediate: true,\n      handler (v) {\n        this.doSomething(v)\n      }\n    },\n\n    // will fire when a `justOnceEvent` is fired, and then won't fire again;\n    // may fire twice if combined with `immediate`\n    justOnceEvent: {\n      once: true,\n      handler (v) {\n        console.log('arg is', v)\n      }\n    }\n\n  }\n}\n```\n\n### Emitting Events\n\nEvery component will be inject with an instance of `$event`, which allows the developer to emit events into the application-wide event bus. Any components listening to the emitted event will be triggered. More details can be seen in the [API](#api-events) section below.\n\nThe methods exposed by `$event` below are basically the same as [normal event methods in a Vue component](https://vuejs.org/v2/api/#Instance-Methods-Events), but instead of having only the parent component as a listeners, any component can subscribe to any events.\n\n```js\n// AnyComponent.vue\nexport default {\n  // ...\n  methods: {\n    onSomething () {\n      this.$events.emit('someEvent', this.payload)\n    }\n  },\n  // ...\n}\n```\n\nAPI (`$events`)\n---------------\n\n#### __`.emit`__\n+ __Arguments__\n    * `{string} eventName`\n    * `[...args]`\n+ __Usage__\n    * Triggers an event on the event bus. Any additional arguments will be passed into the listener’s callback function.\n\n#### __`.on`__\n+ __Arguments__\n    * `{string | Array\u003cstring\u003e} event` (array only supported in Vue 2.2.0+)\n    * `{Function} callback`\n+ __Usage__\n    * Listens for an event in the global event bus. Normally, it is easier to allow the plugin to control the subscription of events. However, special cases do exist, so you can manually listen for an event if need be; just keep in mind that **the plugin does not track manual subscriptions**, so you must remember to unsubscribe before the component is destroyed. The callback will receive all the additional arguments passed into the event-triggering method.\n\n#### __`.once`__\n+ __Arguments__\n    * `{string | Array\u003cstring\u003e} event` (array only supported in Vue 2.2.0+)\n    * `{Function} callback`\n+ __Usage__\n    * Listens for an event in the global event bus, but only once. The listener will be removed once it triggers for the first time.\n\n#### __`.off`__\n+ __Arguments__\n    * `{string | Array\u003cstring\u003e} event` (array only supported in Vue 2.2.2+)\n    * `{Function} [callback]`\n+ __Usage__\n    * Removes a global event bus listener. Both event and callback are necessary, to avoid removing more listeners than intended.\n\nLicense\n-------\n[ISC](http://opensource.org/licenses/ISC) © 2019 Ricardo Nolde\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnolde%2Fvue-plugin-events","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnolde%2Fvue-plugin-events","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnolde%2Fvue-plugin-events/lists"}