EventBus with Vue.js

How to build a simple Event Bus system with Vue.js Components

HTML

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="the-example" class="container">
  <h1>Building an Event Bus  <a href="https://vuejs.org" target="_blank">Vue.js</a></h1>
  <p>Here we have two Buttons, rigged to emit their respective Events to the Event Bus. Also, we have boxes that will respond to the Events. Both component types are completely isolated.</p>
  <div class="row">  
    <div class="col-xs-6">
      <the-button what="Event #1"></the-button>
      <the-button what="Event #2"></the-button>  
    </div>
    <div class="col-xs-6">
      <the-box name="Receiver #1"></the-box>  
      <the-box name="Receiver #2"></the-box>  
    </div>
  </div>
</div>

CSS

.the-button {
  margin-bottom: 1em;
}

Babel + JSX

/******************************************
The Central Event Bus Instance
*******************************************/
let EventBus = new Vue();


/******************************************
A sample Vue.js component that emits an event
*******************************************/

let TheButton = Vue.extend({
	name: "the-button",
  props: ["what"],
  template: `
  	<button class="btn btn-md btn-success the-button" @click="makeItHappen()">Sender: {{what}}</button>
  `,
  methods: {
  	makeItHappen: function(){
    	EventBus.$emit("somethingHappened", this.what)
    }
  }
});

Vue.component("the-button", TheButton);

/******************************************
A sample Vue.js component that received an event
*******************************************/

let TheBox = Vue.extend({
	name: "the-box",
  props: ["name"],
  template: `
  	<div class="well">
    	<div class="text-muted">{{name}}</div>	
    	<div v-html="respondedText"></div>
     </div>
  `,
  data: function(){
  	return {
    	respondedText: null
    }
  },
	created: function(){
  	EventBus.$on('somethingHappened', (what)=>{
    	this.respondedText = 'Event Received: <strong>' + what + '</strong>';
    })
  	console.log("Responder")
  }

});

Vue.component("the-box", TheBox);



/******************************************
Example Root Vue Instance
*******************************************/

new Vue({el: "#the-example"});