https://github.com/phanan/vuebus

A simple event bus in Vue 2.x
https://github.com/phanan/vuebus

Last synced: about 1 month ago
JSON representation

A simple event bus in Vue 2.x

• Host: GitHub
• URL: https://github.com/phanan/vuebus
• Owner: phanan
• Created: 2018-02-26T14:19:40.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-07-21T02:02:15.000Z (over 2 years ago)
• Last Synced: 2024-10-08T09:58:47.544Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 58.6 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# VueBus

> A dead-simple event bus for Vue 2.

## Installation

Install VueBus with yarn or npm:

  

  ```bash

  yarn add @phanan/vuebus

  # or

  npm install @phanan/vuebus

  ```

## Usage

First, import and initialize a new VueBus instance:

  

  ```js

  import VueBus from '@phanan/vuebus'

  const bus = new VueBus()

  ```

### Emit an event

```js

bus.emit('userLoggedIn')

bus.emit('userLoggedIn', 'with', 'additional', data)

```

### Listen to events

With VueBus, you can listen and react to one event:

```js

bus.on('userLoggedIn', () => this.sayHello())

```

or an array of events:

```js

bus.on(['userLoggedIn', 'userLoggedBackIn'], () => this.sayHello())

```

By passing an object of `{ eventName: callbackFunction }` shape, you can listen to several events and react to each of them with a different callback:

```js

bus.on({

  userLoggedIn () {

    this.sayHello()

  },

  userLoggedOut () {

    this.sayGoodbye()

  }

})

```

### `once` and `off`

VueBus's `once` and `off` behave exactly like their [Vue](https://vuejs.org/v2/api/#vm-once) [counterparts](https://vuejs.org/v2/api/#vm-off).

### Attach to Vue.prototype

VueBus can attach itself to Vue.prototype and become available as an instance property with the `attach` function . By default, you can access VueBus as `this.$vuebus`, but the property name can be customized by passing a string as an argument. 

```js

(new VueBus()).attach()

// VueBus is now available as a Vue's instance property

this.$vuebus.emit('userLoggedIn')

// Use a custom property name

(new VueBus()).attach('$bus')

this.$bus.emit('userLoggedIn')

```

## License

MIT © [Phan An](https://phanan.net)