Type-Based Global Events in Vue.js
Join the DZone community and get the full member experience.Join For Free
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
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
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
Consequently, we can simply import and use our
EventBus in any other Vue component as well:
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.
Published at DZone with permission of Yavuz Tas. See the original article here.
Opinions expressed by DZone contributors are their own.