Vue3-Eventbus

Tiny event bus plugin for Vue3.

Why

Vue3$on``emitVue3eventBus

App instance dont't have $on and $emit methods anymore in Vue3.

Remove $on, $off and $once instance methods. Vue instances no longer implement the event emitter interface. -- active-rfcs/0020-events-api-change.md

So the RFC suggests using a third-party library instead. But you have to do some repetitive work for it. This tiny tool can solve this problem for you.

Install

$ npm install --save vue3-eventbus

Usage

use

// import {createApp} from 'vue
import eventBus from 'vue3-eventbus'
// const app = createApp(App)
app.use(eventBus)

emit

// Button.vue
import bus from 'vue3-eventbus'
// or: import { bus } from 'vue3-eventbus'
export default {
    setup() {
        // fire an event
        bus.emit('foo', { a: 'b' })
    }
}

listen/unlisten

// Panel.vue
import bus from 'vue3-eventbus'
export default {
    setup() {
       // listen to an event
        bus.on('foo', e => console.log('foo', e) )

        // listen to all events
        bus.on('*', (type, e) => console.log(type, e) )

        // working with handler references:
        function onFoo() {}
        bus.on('foo', onFoo)   // listen
        bus.off('foo', onFoo)  // unlisten
    }
}

Advanced Usage

**Access by instance **

Don't need to import vue3-eventbus import vue3-eventbus

export default {
    created() {
        this.$eventBus.emit('foo')
    }
}

Access by inject method inject

Have to import inject api from vue

import `inject` from 'vue'
export default {
    setup() {
        const bus = inject('$eventBus')
        bus.emit('foo')
    }
}

Options

app.use(bus, options)

defaultOptions = {
    // Access by instance 
    global: true,
    // Access by inject provide
    inject: true,
    // 
    globalPropertyName: '$eventBus',
    // inject
    injectName: '$eventBus'
}

example

// main.js
app.use(bus, {
    globalPropertyName: '$ev'
})

// Button.vue
created() {
    this.$ev.emit('click', {time: Date.now()})
}

| | | | | | |

Native usage without vue3-eventbus

vue3-eventbus

// bus.js
// + + +
export default {
    on(){
        // ...
    }
    off(){
        // ...
    }
    emit(){
        // ...
    }
}

// main.js
// +
import $bus from './lib/helpers/bus.js'
// +
app.provide('$bus', $bus)
// +
app.config.globalProperties.$bus = $bus

// Button.vue
// +
import { inject } from 'vue'
setup() {
    // import and inject in every component
    // +
    const $bus = inject('$bus')
    $bus.emit('click')
}

// Panel.vue
// +
import { inject } from 'vue'
setup() {
    // +
    const $bus = inject('$bus')
    $bus.on('click')
}

// Page.vue
import { inject } from 'vue'
setup() {
    const $bus = inject('$bus')
    $bus.off('click')
}