DEV Community

Basit Ali Mundia
Basit Ali Mundia

Posted on

5 2

Renderless EventBus component for Vue.js

Assumptions:

This article assumes you know about the neat little trick to use Vue as an event bus to communicate between your components. If not, read the article Creating a Global Event Bus with Vue.js by Joshua Bemenderfer.

Why?

I started off using the EventBus in my components and the implementation looked like this,

  mounted() {
    EventBus.$on('some-event', this.handleEvent)
  },
  destroyed() {
    EventBus.$off('some-event', this.handleEvent)
  }

This got a little cluttered as the number of events increased and the worse part? you can forget turning off the events.

Solution

The two solutions the came up to my mind were,

  1. Mixin to auto destroy events
  2. A dummy component that handles the mounted and destroyed logic.

Personally, I don't like mixins which is why I didn't even think twice about the point 1.

The dummy component seemed more fun to write. Additionally, event listeners in html templates looked a lot better than their JS counterpart (and it conforms to the idea behind https://vuejs.org/v2/guide/events.html#Why-Listeners-in-HTML).

This is how the component for EventBus looks like,

import _ from 'lodash'
import { EventBus } from '../common/eventBus.js'

export default {
  data() {
    return {
      events: Object.keys(this.$listeners),
      methods: _.mapValues(this.$listeners, (value, key) => this.handleEvent.bind(this, key))
    }
  },
  mounted() {
    this.events.forEach(event => {
      this.methods[event].SOMETHING = event
      EventBus.$on(event, this.methods[event])
    })
  },
  destroyed() {
    this.events.forEach(event => {
      EventBus.$off(event, this.methods[event])
    })
  },
  methods: {
    handleEvent(name, ...args) {
      this.$emit(name, ...args)
    }
  }
}

The demo is up at https://codesandbox.io/s/k5v2owk8v7.

Footnotes

This is my first ever post on any platform so looking forward to your comments.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more