In we have essentially three ways of making unrelated components communicate with each other: Vue Js Vuex Pinia Event Bus On the , we can read: official documentation In most circumstances, using a global event bus for communicating between components is discouraged. While it is often the simplest solution in the short term, it almost invariably proves to be a maintenance headache in the long term. So generally in the long run it is better to use Vuex. Also in the official documentation, you can see how the Event Bus implementation has changed from Vue 2 to Vue 3. Scaffolding the project In this tutorial, we will use the Vite build tool to scaffold the project. # npm 6.x
npm init vite@latest vue-event-bus-1 --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest vue-event-bus-1 -- --template vue Then we need to install an external library implementing the event emitter interface, in this case, . mitt npm install --save mitt The Project The project consists of two simple components, and when we click on the emit event button in String to change in  FirstComponent.vue becomes String changed thanks to the Event Bus FirstComponent.vue, SecondComponent.vue SecondComponent.vue The Code In main.js  we create an instance of mitt which is used globally import { ***createApp ***} from 'vue'
import mitt from 'mitt'
import App from './App.vue'


const emitter = mitt()
const app = ***createApp***(App)

app.config.globalProperties.emitter = emitter
app.mount('#app') Now we can access the emitter globally, so in we subscribe to the event emitted by FirstComponent.vue SecondComponent.vue. Let’s take a look at FirstComponent.vue <script>
export default {
  data: function () {
    return {
      testEvent: 'String to change'
    }
  },
  created (){
    this.emitter.on('my-event', (evt) => {
      this.testEvent = evt.eventContent;
    })
  }
}
</script> Now in SecondComponent.vue, let’s emit the event. <template>
    <div style="border: 1px solid black;">
        <h1>Second Component</h1>
        <button v-on:click="emitMyEvent">Emit Event</button>
    </div>
</template>

<script>
    export default {
        methods: {
          emitMyEvent() {
              this.emitter.emit('my-event', {'eventContent': 'String changed'})
          }
        }
    }
</script> You can find the code of this tutorial on github: https://github.com/CertosinoLab/mediumarticles/tree/vue-event-bus-1 Thank you for reading Also published here. Lead image by on Unsplash robin inizan

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Use an Event Bus in Vue.js 3

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Event Bus Implementation(s)

Connecting Event Bridges Across AWS Accounts: A How-To Guide

How To Create A Simple Event Bus in Android

Build Your Own Delayed EventBus in Java with Just a Few Lines of Code

10 Things Every Beginner Should Know When Learning Javascript And React

Event Bus Implementation(s)

Connecting Event Bridges Across AWS Accounts: A How-To Guide

How To Create A Simple Event Bus in Android

Build Your Own Delayed EventBus in Java with Just a Few Lines of Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps