如何在 Nuxt 中使用 eventHub？

Question

How to use the eventHub on Nuxt.js?
we usually set on eventHub in main.js just like this:

export default {
  name: "App",
  data() {
    return {
      eventHub: new Vue()
    };
  },
  provide() {
    return {
      eventHub: this.eventHub
    };
  }
};

now problem is nuxt doesn't main.js, how do I configure eventHub in nuxt?

Answer 1

@Guillermo s Solution should work. However, you do not have to use a plugin. Instead, you can use $nuxt.$emit . It does the same as what Guillermo suggests but does not require you to register a plugin.

Just register a listener in one Component:

// Code in a Component
beforeMount() {
   this.$nuxt.$on('my-event', () => { console.log("Hello!")});
}

Now you can fire events in another Component and the first one will listen for them. You can fire these Events like so:

// Code in some other Component
methods() {
  letComponentSayHello() {
    this.$nuxt.$emit("my-event");
  }
}

If you need to fire an event after a Component is mounted, make sure you register the listener in your beforeMounted() -Hook. This was also suggested here https://stackoverflow.com/a/64717957/11930769 .

I was not able to find something on the Docs about this. Nonetheless, here is an article that suggests to use the $nuxt.$emit . https://medium.com/@aneesshameed/event-bus-in-nuxt-7728315e81b6

Answer 2

The easiest way you can achieve this in Nuxt is by creating a custom plugin that injects your event hub.

Create a file called 'eventHub.js' in the 'plugins/' directory

import Vue from 'vue'

export default (context, inject) => {
  const $eventHub = new Vue()
  inject('eventHub', $eventHub)
}

Now, in your 'nuxt.config.js' register the plugin

plugins: [
  { src: '~/plugins/eventHub.js' },
],

And you are good to go: You can use it from inside any Vue component referencing it like this:

// Event Listen
this.$eventHub.$on('test-event', () => {})

// Event Emit
this.$eventHub.$emit('test-event')

You will have also have the $eventHub object available in Nuxts 'context' object and from any mutation or action in the store (although I would be cautious about using it in that way).