"Exploring the Power of Vue 3 Event Bus Through the Composition API

Question

"Exploring the Power of Vue 3 Event Bus Through the Composition API

I recently set up mitt and I'm facing difficulties dispatching events to another component. The issue arises due to the absence of this in the setup() method, making it challenging to access the app instance.

Here's my current approach:

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);

In the desired component, I aim to dispatch an event

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

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

Due to the absence of this, accessing .emitter is not possible. What am I overlooking? How can I effectively utilize mitt in Vue 3 Composition API?

Interestingly, using v2 syntax allows me to access this.emitter. However, I'm keen on exploring the Composition API method.

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

javascript vue.js vuejs3 event-bus vue-composition-api

Answer 1

Answer №1

If you want to implement an event bus in Vue 3 Composition API, the process involves using Vue 3's latest provide API in your main.js file and then utilizing inject in any component:

1. Start by installing mitt:

npm install mitt

2. Providing the Event Bus:

Within 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);          // ✅ Provided as `emitter`
app.mount('#app');

3. Injecting the Event Bus

3a. In Any Component - Emitting an event

import { inject } from 'vue'

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

^{You can call mymethod from a button click or similar events.}

3b. In any Component - Listening 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('Received myevent!', `Value: ${value}`);
    });
  },
}

Console Output

Received myevent! Value: 100

Answer 2

If you want to implement an event bus in Vue 3 Composition API, the process involves using Vue 3's latest provide API in your main.js file and then utilizing inject in any component:

1. Start by installing mitt:

npm install mitt

2. Providing the Event Bus:

Within 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);          // ✅ Provided as `emitter`
app.mount('#app');

3. Injecting the Event Bus

3a. In Any Component - Emitting an event

import { inject } from 'vue'

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

^{You can call mymethod from a button click or similar events.}

3b. In any Component - Listening 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('Received myevent!', `Value: ${value}`);
    });
  },
}

Console Output

Received myevent! Value: 100

Answer 3

Answer №2

If you need to access the global property component, you can utilize the getCurrentInstance method:

Here is an example in JavaScript:

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

Answer 4

If you need to access the global property component, you can utilize the getCurrentInstance method:

Here is an example in JavaScript:

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

Answer 5

Answer №3

Up to this point, I've implemented the following code to provide access to the "emitter".

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

Within the components, I subsequently utilize

import emitter from '@/main';

So far, this approach has proven effective in both Vue2 and Vue3 - particularly with the options API.

However, I have encountered challenges when it comes to the new vite server and hot module reload (hmr). Is there a more optimal way to structure this?

Answer 6

Up to this point, I've implemented the following code to provide access to the "emitter".

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

Within the components, I subsequently utilize

import emitter from '@/main';

So far, this approach has proven effective in both Vue2 and Vue3 - particularly with the options API.

However, I have encountered challenges when it comes to the new vite server and hot module reload (hmr). Is there a more optimal way to structure this?

Answer 7

Answer №4

To implement Event Bus with Composition API, follow these steps:

Start by installing and registering mitt in your app.js similar to how it is done below:

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);

Next, organize the code for accessing the global emitter into a separate file named accessEmitter.js within the js/Composables folder:

import { getCurrentInstance } from 'vue';

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

Now you can use this functionality 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>

Answer 8

To implement Event Bus with Composition API, follow these steps:

Start by installing and registering mitt in your app.js similar to how it is done below:

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);

Next, organize the code for accessing the global emitter into a separate file named accessEmitter.js within the js/Composables folder:

import { getCurrentInstance } from 'vue';

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

Now you can use this functionality 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>

Answer 9

Answer №5

While @Dan's solution is effective, it may result in a 'emitter' is of type 'unknown' error in typescript. @acantepie has provided a solution for this issue which can be found here. The solution involves using a singleton class like so:

import mitt from "mitt";

export default mitt()

To use it:

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

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

Hopefully this will benefit someone in need like myself :)

Answer 10

While @Dan's solution is effective, it may result in a 'emitter' is of type 'unknown' error in typescript. @acantepie has provided a solution for this issue which can be found here. The solution involves using a singleton class like so:

import mitt from "mitt";

export default mitt()

To use it:

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

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

Hopefully this will benefit someone in need like myself :)

"Exploring the Power of Vue 3 Event Bus Through the Composition API

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Having issues with UTF8 encoding when utilizing AJAX to send the complete HTML source in JavaScript

Clear the cache following the service call

How can I monitor and handle JavaScript errors without causing TestCafe tests to fail?

Divide a string into separate numbers using JavaScript

Substitute the comma with a space

Set up authentication within a separate AngularJS module

Show the outcome of a function inside an ng-repeat loop

Transform a list separated by commas into an unordered list

The Select2 ajax process runs twice

Three.JS: Utilizing a wireframe material for spheres with the EdgesHelper control

When attempting to log a console statement using Vue Axios, an unexpected error occurs and returns an unexpected

Issue with Angularjs: NG-repeat and filter not functioning correctly on array

In JavaScript, when you update the property of a nested object within an array, the changes will also be applied to the same property for

What could be causing React to render only the final two elements of my array?

Steps for disabling script debugger within Visual Studio 2013

Having trouble linking multiple components using redux in react native

Is it possible for a MUI control to automatically close itself when clicked outside of the component?

Tips for successfully implementing an Ocrad.js example

Combining URLs in Angular 6 - A Step-by-Step Guide

Error: Excessive recursion in Nuxt 3 module component