CODEWITHSUNDEEP
vuejs3
Alan
Alan

Reputation: 1287

How to setup a Global Event bus in Vue 3

I am creating a Vue 3 app and trying to implement a Global event bus for two components to communicate on. In past w/Vue 2 I would do the following:

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
export const bus = new Vue();
new Vue({
  render: h => h(App),
}).$mount('#app')

Now w/Vue 3 I understand new Vue is out and createApp() is in. I thus setup bus as:

// main.js
import { createApp } from "vue";
import App from "./App.vue";

export const bus = createApp();

createApp(App).mount("#app");

And App.vue is:

<template>
  <!-- ============== Modal Component ============= -->
  <FormModal v-show="isModalVisible" @close="closeModal">
    <template v-slot:header> Add Equipment Item to Scrap List </template>
  </FormModal>

 
    <!-- More template stuff -->

  <DisplayScrap />
</template>

<script setup>
import { ref } from "vue";
import FormModal from "./components/form-modal.vue";
import DisplayScrap from "./components/display-scrap.vue";

Now when I go to the first component(The emitter) and try to import the Global bus :

// form.modal.vue
import { reactive, defineEmits, ref, toRaw } from "vue";
import addRow from "../helperFunctions/addRow.js";
import { bus } from "../main.js";

I now get error in console of:

Uncaught ReferenceError: can't access lexical declaration 'App' before initialization http://localhost:3000/src/main.js?t=1640126294730:7 main.js:7:1

Any advise on what is the proper way in Vue 3 to setup the global bus is most appreciated. Am I missing some circular reference that is causing the error? I don't see any example in the Docs for this type of situation...

Upvotes: 2

Views: 8321

Answers (2)

Krishna Vedula
Krishna Vedula

Reputation: 1791

I have come across the same issue, and I found the vue3-eventbus to be the exact simple solution. It provides support for Vue2, Vue3, compositions API and also Typescript support. I rate this plugin highly.

Upvotes: 0

Tawfik Nasser
Tawfik Nasser

Reputation: 1124

  • First the error:

    did you try to export const bus = createApp(); in a different file to avoid circular ref ?

  • Regarding global bus in vue3:

    it is recommended to use a global state like what vuex provide you or any external package as best practice to communicate between components.

    and even if you managed to import the created bus you still don't have the listener $on to receive the emitted data. as they deleted it in vue3

Upvotes: 1

Related Questions