Event bus in NUXT

In NUXT any component in a page can emit an event and any other component can listen to it.

To emit an event from any component use,

$nuxt.$emit('my-custom-event')

And to capture an event at any other component use

created() {
   this.$nuxt.$on('my-custom-event', () => {
     //Do Something
   })
}

Let's take an example, I have an index page (pages/index.vue). The index page uses the default layout (layouts/default.vue) In default.vue I have my app toolbar and different buttons, one button is “Contact”. Upon clicking the contact button, a ContactForm will be opened. ContactForm is a component (components/ContactForm.vue). This contact form is included in the index page as a component.

So, the click passes from default.vue to index.vue and is intercepted by ContactForm.vue.