{"id":12470,"library":"vue-events","title":"Easy Event Handling for Vue 1 & 2","description":"vue-events is a Vue.js plugin designed to simplify global event handling within applications built with Vue 1.x or Vue 2.x. It extends the Vue prototype with a `$events` object, which acts as a global event bus, abstracting away the underlying Vue instance's `$emit`, `$on`, and `$off` methods. The package provides several aliases for these core methods, such as `fire`/`emit` for `$emit`, `listen`/`on` for `$on`, and `remove`/`off` for `$off`, aiming for a more semantic API. The current stable version is 3.1.0, published in 2017. This package is not compatible with Vue 3.x, as Vue 3 removed the core event emitter API (`$on`, `$off`, `$once`) that this plugin relies upon. As such, while it served its purpose for earlier Vue versions, it is no longer actively maintained or suitable for modern Vue 3 development.","status":"abandoned","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/cklmercer/vue-events","tags":["javascript","Vue","events","bus","plugin","typescript"],"install":[{"cmd":"npm install vue-events","lang":"bash","label":"npm"},{"cmd":"yarn add vue-events","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-events","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for the plugin to function and extend Vue's prototype. Compatible with Vue 1.x and 2.x.","package":"vue","optional":false}],"imports":[{"note":"This plugin is typically installed using `Vue.use(VueEvents)`. The `require()` pattern is for older CommonJS environments or when Vue is globally available (e.g., via `window.Vue`).","wrong":"const VueEvents = require('vue-events')","symbol":"VueEvents","correct":"import VueEvents from 'vue-events'"},{"note":"Required to install the plugin via `Vue.use()`. Vue's default export is the constructor.","wrong":"import { Vue } from 'vue'","symbol":"Vue","correct":"import Vue from 'vue'"},{"note":"`$events` is added to the Vue prototype after plugin installation; it's not directly imported. It acts as the global event bus.","wrong":"this.$emit('myEvent', payload) (when intending to use the global bus)","symbol":"$events","correct":"this.$events.fire('myEvent', payload)"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueEvents from 'vue-events';\n\n// Install the plugin\nVue.use(VueEvents);\n\n// Create a root Vue instance\nnew Vue({\n el: '#app',\n data() {\n return {\n message: 'Hello from Vue Events!'\n };\n },\n mounted() {\n // Listen for an event\n this.$events.on('exampleEvent', (data) => {\n console.log('Received exampleEvent:', data);\n this.message = `Event received: ${data.detail}`;\n });\n\n // Fire an event after a short delay\n setTimeout(() => {\n this.$events.fire('exampleEvent', { detail: 'Data from emitter!' });\n }, 1000);\n },\n beforeDestroy() {\n // It's good practice to remove listeners to prevent memory leaks\n this.$events.off('exampleEvent');\n },\n template: `\n
\n

Vue Events Demo

\n

{{ message }}

\n \n
\n `,\n methods: {\n triggerAnotherEvent() {\n this.$events.emit('anotherEvent', { source: 'button' });\n }\n }\n});\n\n// A separate component or instance can also listen or emit\nnew Vue({\n mounted() {\n this.$events.listen('anotherEvent', (data) => {\n console.log('Another event caught!', data);\n });\n }\n}).$mount(document.createElement('div')); // Mount without an element to just make it active.","lang":"typescript","description":"This quickstart demonstrates how to install `vue-events` and use its `$events.on` and `$events.fire` methods to communicate between parts of a Vue 2.x application."},"warnings":[{"fix":"For Vue 3, consider using alternative event emitter libraries like `mitt` or `tiny-emitter`, or adopt more idiomatic Vue 3 communication patterns such as props/emits, provide/inject, or global state management with Pinia/Vuex.","message":"This package is fundamentally incompatible with Vue 3.x. Vue 3 removed the `$on`, `$off`, and `$once` instance methods from Vue instances, which `vue-events` relies upon for its global event bus functionality. Attempting to use `vue-events` in a Vue 3 application will result in runtime errors.","severity":"breaking","affected_versions":">=3.0.0 of Vue"},{"fix":"Prefer explicit component communication via props and `$emit` for parent-child, `provide`/`inject` for descendant communication, or dedicated state management solutions like Vuex/Pinia for global state.","message":"The global event bus pattern, while convenient for simple cases, is largely discouraged in modern Vue 2.x and especially Vue 3.x applications. It can lead to hard-to-trace event flows, hidden dependencies, and maintainability issues as applications grow.","severity":"deprecated","affected_versions":">=2.0.0 of Vue"},{"fix":"Establish a team convention for which aliases to consistently use, e.g., sticking to the Vue-native `$emit`, `$on`, `$off` names.","message":"The package provides multiple aliases for its core methods (`fire`, `emit`, `$emit` for emitting; `listen`, `on`, `$on` for listening; `remove`, `off`, `$off` for removing). While intended for flexibility, this can lead to inconsistent code styles within a team and confusion about which alias to use.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import VueEvents from 'vue-events'; Vue.use(VueEvents);` is executed *before* any Vue instances that attempt to use `$events` are created. Verify the import path is correct.","cause":"The `vue-events` plugin was not correctly installed via `Vue.use(VueEvents)` before creating Vue instances, or the import path for `VueEvents` was incorrect.","error":"TypeError: Cannot read properties of undefined (reading '$events')"},{"fix":"Ensure the plugin is installed with `Vue.use(VueEvents)`. If using TypeScript, you might need to add a declaration file to augment the `Vue` instance type, typically by declaring a module `vue-events` and adding `$events` to `Vue.prototype`.","cause":"Using TypeScript without proper type declaration merging for the `vue-events` plugin, or the plugin was not installed globally onto the Vue prototype.","error":"Property '$events' does not exist on type 'Vue'."},{"fix":"`Vue.use()` should typically be called only once at the application's entry point (e.g., `main.ts` or `main.js`). Remove redundant calls to `Vue.use(VueEvents)`.","cause":"Attempting to call `Vue.use(VueEvents)` multiple times in the application lifecycle.","error":"This plugin cannot be installed because it has already been installed."}],"ecosystem":"npm"}