In one of the latest freelance projects of mine, my client prefers Vue.js, which is recently super popular on the frontend side. So, I dove into Vue. I can say that it is very practical and effective. Besides, when we compare it with other predominant competitors like Angular and Aurelia, we can easily notice Vue has a very small learning curve.
However, it didn’t take long for me to have a feeling that my code was getting unmanageable. This wasn’t a big surprise to me because this is often the trade-off with dynamically-typed languages.
Today, I am going to show an effective way of using global events in Vue.
A Simple Event Bus in Vue
The typical way of implementing a global event bus in Vue is just using the Vue object itself:
Super easy, right?
You may also like:
How and Why We Moved to Vue.js.
The Problem Coming From Strings
As long as our application has more than a couple of lines, sooner or later, we start stressing to follow which components publish and which others listen to them.
Therefore, we can imagine how hard it is to identify a simple typo in a string-based event name, especially in a large project:
Implicit Event Parameters
This is another problem we should notice because we don’t define any corresponding type or interface for our event — only God knows what and how many parameters might be in our event.
In order to identify them, we have to do these kinds of tests:
A Proper Solution Comes From ES6+
As a fan of the statically-typed Java world, I prefer using types clearly unless it’s super unconventional for the specific language. Thus, I will show a solution to get rid of these string-based event names by using the capabilities, which ECMAScript 6 and later offers.
Defining Event Types
Let’s create a separate file to define our event types:
As we notice, defining event type classes and parameters explicitly in constructor offers us great readability.
Although it is optional, we recommend keeping comments updated. This provides a way to follow the components, which deal with a certain event type.
Importing Event Types
To use our type-based events, we can easily import them into our components:
As we specify explicitly every event type we need, it brings us another important benefit that we can easily identify what events are involved in a component.
Registering an Event
In order to register our event, we simply use our event types and their static name properties:
Plus, we can expect the event type instance itself as a single argument instead of more than one arguments:
Publishing an Event
Now, we can publish our events simply by creating a new instance of that event type:
Implementing a Wrapper Class
Certainly, we may proceed to define a class, as EventBus and wrap the basic methods of Vue instance:
Therefore, we can use it in a more practical way:
Using as a Plugin
In addition, we may prefer to use our EventBus as a Vue Plugin:
Certainly, to be able to use the plugin, we should import and register it to our Vue instance:
Consequently, we can simply import and use our EventBus in any other Vue component as well:
Finally
In this short tutorial, I have explained how to implement type-based global events and use them in Vue.
You can find the code of the sample plugin over on GitHub.
