@nguyenshort/vue3-mitt

Vue 3 EventBus

"In Vue 3, it is no longer possible to use these APIs to listen to a component's own emitted events from within a component. There is no migration path for that use case". See doc.
This library is a wrapper of mitt, that will help you enable eventbus again.

Installation

npm i @nguyenshort/vue3-mitt

Initialization

Easy install and use.

Global:

// main.ts, main.js
import Vue from "vue";
import VueMitter from '@nguyenshort/vue3-mitt'

app.use(VueMitter)

Component:

import VueMitter from '@nguyenshort/vue3-mitt'
export default {
    provide: {
        '$emitter': VueMitter
    }
}

Usage

Support option API and Composition API

Option API

<script>
export default {
  name: "FooComponent",
  methods: {
    test() {
      this.$emitter.emit('foo', 'bar')
    }
  }
};
</script>

<script>
export default {
  name: "BarComponent",
  mounted() {
    this.$emitter.on('foo', (data) => {
      console.log('foo: ', data) // foo: bar
    })
  },
  beforeUnmount() {
    // Don't forget the destroy event. Avoid memory leaks
    this.$emitter.off('foo')
  }
};
</script>

Composition API

<script setup>
import { useEmitter } from '@nguyenshort/vue3-mitt'
const emitter = useEmitter()

const sendEvent = () => {
  emitter.emit('foo', 'bar')
}

</script>

<script setup>
import {onMounted, onUnmounted} from "@vue/runtime-core"
import {useEmitter} from '@nguyenshort/vue3-mitt'

const emitter = useEmitter()

onMounted(() => emitter.on('foo', (data) => {
  console.log('foo:', data) // foo: bar
}))

// Don't forget the destroy event. Avoid memory leaks
onUnmounted(() => emitter.off('foo'))

</script>

Typescript

import {useEmitter} from '@nguyenshort/vue3-mitt'

const emitter = useEmitter<{
    foo: string
}>()