How to create a local event bus on Vue 3

Question

how can I use the event bus on one page so that all components and the page can read and receive events there For example, in vue 2, I created an object which, when the page was created, assigned fields with the context and I used this context in all components of the page Example

//main.js
global.context = new Object();
global.context.app = Vue;

//field assignment with context
global.context.authorization = this;
 
//using context
global.context.authorization.$emit(
  "authorizationMessage",
  this.t("Password fields didn't match")
);

Can I use imports to improve this approach? In vue 3 I am getting error using

global.context.authorization.$on("authorizationMessage", (msg) => {
  alert(msg);
});

Uncaught (in promise) TypeError: global.context.authorization.$on is not a function
    at Proxy.created (Messenger.vue?1b1a:25)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
    at callHookWithMixinAndExtends (runtime-core.esm-bundler.js?5c40:6032)
    at callSyncHook (runtime-core.esm-bundler.js?5c40:6018)
    at applyOptions (runtime-core.esm-bundler.js?5c40:5956)
    at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6636)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6567)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6503)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4206)

tony19 · Accepted Answer · 2022-09-06 19:08:20Z

There is no event bus in Vue 3. So $on will not work. See: https://v3-migration.vuejs.org/breaking-changes/events-api.html#events-api
It is recommended that you create your event bus with external libraries, unless you want to make use of the supported parent-children event-based communication in which the child emits an event which can only be listened to by the parent. See: https://v3.vuejs.org/guide/component-custom-events.html#custom-events
To implement an event bus for your application, make sure that you are emitting (firing) the events and listening to them with the same instance of the emitter. Else, it won't work.
I preferred emittery (https://github.com/sindresorhus/emittery) for event bus with Vue js. It is robust with excellent Typescript support. I also use it on Node js via the Adonisjs framework.
Create a useEvent hook //file: composables/useEvent.ts

import Emittery from 'emittery';
const emitter = new Emittery();
// Export the Emittery class and its instance.
// The `emitter` instance is more important for us here
export {emitter, Emittery};

// Export the Emittery class and its instance export { emitter, Emittery };

In any vue component listen to an event // file: AnyVueComponent.vue

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import {emitter} from '../composables/useEvent'

export default defineComponent({
  name: 'ExampleComponent',
  components: {},
  props: {},
  setup() {
    onMounted(() => {
      emitter.on('event-name', async () => {
        // Perform actions. async...await is supported
      });
    })
    return {};
  },
});
</script>

In any vue component emit the event

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import {emitter} from '../composables/useEvent'

export default defineComponent({
  name: 'ExampleComponent',
  components: {},
  props: {},
  setup() {
    void emitter.emit('event-name');
    return {};
  },
});
</script>

Note that you can import the useEvent hook into any non-Vue file and it will work. It is just a JS/TS file.

For the Quasar Framework:

Create a boot file

./node_modules/.bin/quasar new boot EventBus --format ts

// file: EventBus.ts

import { boot } from 'quasar/wrappers';
import Emittery from 'emittery';

const emitter = new Emittery();

export default boot(({ app }) => {
  app.config.globalProperties.$event = emitter;
});

// Export the Emittery class and its instance
export { emitter, Emittery };

Register with the quasar.conf.js file

module.exports = configure(function(/* ctx */){
  return {
    boot: [
      ...,
      'EventBus',
    ],
  }
}

In any vue component listen to an event // file: AnyVueComponent.vue

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import {emitter} from '../boot/EventBus'

export default defineComponent({
  name: 'ExampleComponent',
  components: {},
  props: {},
  setup() {
    onMounted(() => {
      emitter.on('event-name', async () => {
        // Perform actions. async...await is supported
      });
    })
    return {};
  },
});
</script>

In any vue component emit the event

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import {emitter} from '../boot/EventBus'

export default defineComponent({
  name: 'ExampleComponent',
  components: {},
  props: {},
  setup() {
    void emitter.emit('event-name');
    return {};
  },
});
</script>

tony19 · Accepted Answer · 2022-09-06 19:10:31Z

5

Following the Vue 3 migration guide for using Vue as an event bus, replace that bus with an instance of tiny-emitter:

// event-bus.js
import emitter from 'tiny-emitter/instance'

export default {
  $on: (...args) => emitter.on(...args),
  $once: (...args) => emitter.once(...args),
  $off: (...args) => emitter.off(...args),
  $emit: (...args) => emitter.emit(...args),
}

And use it like this:

// main.js
import eventBus from './event-bus'

//...
global.context.authorization = eventBus

demo

edited Sep 6, 2022 at 19:10

answered Jun 20, 2021 at 18:29

tony19

140k23 gold badges281 silver badges354 bronze badges

Collectives™ on Stack Overflow

How to create a local event bus on Vue 3

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related