Vue.js 2 Design Patterns and Best Practices

Event Bus

When we're looking to create an application wide events system (that is, without strictly parent to child component), we can create what's known as an Event Bus. This allows us to "pipe" all of our events through a singular Vue instance, essentially allowing for communication past just parent and child components. As well as this, it's useful for those not looking to use third-party libraries such as Vuex, or smaller projects that are not handling many actions. Let's make a new playground project to demonstrate it:

# Create a new Vue project$ vue init webpack-simple vue-event-bus# Navigate to directory$ cd vue-event-bus# Install dependencies$ npm install# Run application$ npm run dev

Start off by creating an EventsBus.js inside ...