"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

Exploring the near method to Parse.Query a class

Calculating the 3D Longitude and Latitude coordinates in a THREE.js globe using the radius along with the x and y values

Using jqGrid to load additional JSON data after the initial local data has already been populated in the

Achieving success in element-ui vuejs involves validating the state with the :error parameter

Using backslashes to escape JSON values within a value in Angular

Implementing html5mode in Express.js and Angular.js for cleaner URLs

Prevent individual elements from shifting around on browser resizing within a React form

Attempting to bind an input parameter using NgStyle in Angular version 2 and above

Leverage Vue3's v-html feature without the need for additional wrapping tags by using script

How can the hreflang tag be used correctly in a React application that supports multiple languages?

Running a JavaScript file from Docker to fill a MongoDB database is not working when using the WSL shell on Windows 10

Exploring the history and present state of Vue lifecycle hooks

Struggling with linking my Angular Controller with my View and experiencing difficulty establishing a connection

How can I stretch a background image using jquery to cover the entire document instead of just the window

Trigger JavaScript code following a specific occurrence

Retrieve the value of [routerLinkActive] in the component's class

Extract data from JSON object on the server side

Storing information in Firebase using React.js

javascript ondrag while self-pressing

How to harness the power of loops in JavaScript