Vue 3 Event Bus with Composition API

Question

I have setup mitt and trying to dispatch event to another component but I am having hard time because in the setup() method it doesn't have this for accessing app instance.

Here is what I tried:

import App from './App.vue'
const el = document.getElementById('app')

import mitt from 'mitt';
const emitter = mitt();

const app = createApp(App)
app.config.globalProperties.emitter = emitter;
app.mount(el);

And in the component, I want to dispatch an event

export default {
   setup() {
      function toggleSidebar() {
          this.emitter.emit('toggle-sidebar');

          console.log(this); // binds to setup(), not the vue instance.
      }
   }
}

As this doesn't exist, I can't access the .emitter. What am I missing? How to use officially suggested mitt in Vue 3 composition api?

By the way if I use the v2 syntax, I can access this.emitter. But I am curious about Composition API way

export default {
  mounted() {
    console.log(this.emitter); // works
  }
}

Dan · Accepted Answer · 2022-02-02 13:36:11Z

38

To use an event bus in Vue 3 Composition API, use Vue 3's new provide api in main.js, and then inject in any component:

1. Install mitt:

npm install mitt

2. Provide:

main.js

import { createApp } from 'vue';
import App from './App.vue';

import mitt from 'mitt';                  // Import mitt
const emitter = mitt();                   // Initialize mitt

const app = createApp(App);
app.provide('emitter', emitter);          // ✅ Provide as `emitter`
app.mount('#app');

3. Inject

3a. Any Component - Emit an event

import { inject } from 'vue'

export default {
  setup() {
    const emitter = inject('emitter'); // Inject `emitter`
    const mymethod = () => {
      emitter.emit('myevent', 100);
    };
    return {
      mymethod
    }
  }
}

^{Call mymethod from a button click or something.}

3b. Any Component - Listen for the event

import { inject } from 'vue'

export default {
  setup() {
    const emitter = inject('emitter');   // Inject `emitter`

    emitter.on('myevent', (value) => {   // *Listen* for event
      console.log('myevent received!', `value: ${value}`);
    });
  },
}

Console

myevent received! value: 100

edited Feb 2, 2022 at 13:36

answered Mar 8, 2021 at 23:59

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arun Panneerselvam Over a year ago

mitt is very useful. any decoupled scripts can be seamlessly coupled with vue3 component using mitt eventbus and this helped for a modular scripting with vue3. Thanks.

Daniel · Accepted Answer · 2021-03-08 21:33:19Z

3

You may be able to use getCurrentInstance to get the global property

component:

import { getCurrentInstance } from 'vue';
export default {
  setup() {
    // get current instance
    const internalInstance = getCurrentInstance(); 
    // get the emitter from the instance
    const emitter = internalInstance.appContext.config.globalProperties.emitter;
  }
}

answered Mar 8, 2021 at 21:33

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

2 Comments

senty Over a year ago

This works. Just out of curiosity, is this the right way to use with mitt and alike packages with v3?

Daniel Over a year ago

I believe so. it's the simplest way using the app instance, alternatively you can setup an external (global) emitter.

Kez · Accepted Answer · 2022-05-20 15:37:25Z

3

So far I have used this code to make the "emitter" available.

//main.ts
import mitt from 'mitt'
const emitter = mitt()
export default emitter

And then inside the components I use

import emitter from '@/main';

This worked so far in Vue2 and Vue3 - at least with the options API.

I have to admit though that I currently run into some trouble with the new vite server and the hot module reload (hmr). Is this style suboptimal in any way?

answered May 20, 2022 at 15:37

Kez

1991 silver badge11 bronze badges

Comments

Voivarum · Accepted Answer · 2024-01-23 14:47:43Z

In order to use Event Bus for Composition API you can do the following:

Install and register mitt in your app.js like the TS did:

import App from './App.vue'
const el = document.getElementById('app')

import mitt from 'mitt';
const emitter = mitt();

const app = createApp(App)
app.config.globalProperties.emitter = emitter;
app.mount(el);

After that we'll move the logic for accessing global emitter to a separate file accessEmitter.js. I'll put it into js/Composables folder:

import { getCurrentInstance } from 'vue';

export default function accessEmitter() {
    return getCurrentInstance().appContext.config.globalProperties.emitter;
}

Now it can be utilized in your components:

<script setup>
import accessEmitter from '@/Composables/accessEmitter.js'
const emitter = accessEmitter();

// register listener
emitter.on("myEvent", (data) => {
    console.log('my event');
});
   
// remove listener
emitter.off("myEvent");

</script>

vikramaditya234 · Accepted Answer · 2024-04-16 16:01:55Z

0

Solution by @Dan will work, however in the case of typescript you might get 'emitter' is of type 'unknown' error. Solution to this has been provided by @acantepie discussed here, the solution is to use singleton class like:

import mitt from "mitt";

export default mitt()

And use like:

import EventBus from "../lib/EventBus";
...

EventBus.emit(...)
EventBus.on(...)
...

Hope this helps someone like me :)

answered Apr 16, 2024 at 16:01

vikramaditya234

1,4182 gold badges21 silver badges38 bronze badges

Collectives™ on Stack Overflow

Vue 3 Event Bus with Composition API

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related