vue-events

import Vue from 'vue'; import VueEvents from 'vue-events'; // Install the plugin Vue.use(VueEvents); // Create a root Vue instance new Vue({ el: '#app', data() { return { message: 'Hello from Vue Events!' }; }, mounted() { // Listen for an event this.$events.on('exampleEvent', (data) => { console.log('Received exampleEvent:', data); this.message = `Event received: ${data.detail}`; }); // Fire an event after a short delay setTimeout(() => { this.$events.fire('exampleEvent', { detail: 'Data from emitter!' }); }, 1000); }, beforeDestroy() { // It's good practice to remove listeners to prevent memory leaks this.$events.off('exampleEvent'); }, template: ` <div> <h1>Vue Events Demo</h1> <p>{{ message }}</p> <button @click="triggerAnotherEvent">Trigger Another Event</button> </div> `, methods: { triggerAnotherEvent() { this.$events.emit('anotherEvent', { source: 'button' }); } } }); // A separate component or instance can also listen or emit new Vue({ mounted() { this.$events.listen('anotherEvent', (data) => { console.log('Another event caught!', data); }); } }).$mount(document.createElement('div')); // Mount without an element to just make it active.