If you are a Vue lover (like me) and are looking for a way to extend your Vue application, you have come to the right place. Vue mixins and directives are a powerful combination and a great way to add more reusable functions across parts of your application.
If you are from an Object-Oriented Programming background, then you will see Vue mixins as an imitation of parent classes. You will also see directives are similar to helper functions.
If you do not have an OOP background, then think of mixins as a utility that you design to be shared by multiple people. If you are thinking about an office, it would be the photocopier. If you are thinking about a mall, it would be the mall security. Basically, mixins are resources that multiple parts of your application share.
Prerequisites
- Knowledge of JavaScript
- You have, at the very least, built a Vue application. One with more than 5 components is a plus
- If you have shared the photocopier in the office, you can take a seat in front here
Mixins
Vue documentation has a really simple and straightforward explanation for what mixins are and how they work. According to the docs, mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.
In simpler terms, it means that I can create a component with its data, methods, life-cycle components and have other components extend it. Now, this is different from using components inside other components where you can have a custom component with a name like inside of your template.
Let’s take a look.
Our mixin — This mixin is going to hold basic configurations for our app such as:
- App name
- Greeter method
- Company name for copyright at the footer
Let’s create a simple mixin:
https://medium.com/media/62a3197df7fde6dd17d2d34e6f9ed185/href
Ok. That’s as simple as it gets for a mixin. Now, if we use this in our component, you will see the magic in it.
And to use this, we can do the following in our template:
new Vue({
mixins: [myMixin],
el: '#app'
});
Directives
Directives, on the other hand, are methods like v-for that you can create to modify elements on your template. You know how v-if hides your component if a condition is not met? How about we underline a long sentence with a directive. We can even change the text a little as a way to highlight it.
We can have global directives that we register so that all of the components in our Vue application can use it. We also have local directives that are specific to that particular component. Awesome, right?
Let’s create a global directive now:
https://medium.com/media/46188a16b82c72fc9ac0d65f4cafa45c/href
Now, if we use this directive, you should see that parts of the text have changed.
To use this, we can do the following in our template:
<template>
<div>
<p v-highlight>Hello There!</p>
<p v-highlight="red">This is a red guy</p>
</div>
</template>
Filters
This is another customization helper we will look at. Filters help us in many ways (you might get angry that you didn’t know about these earlier if this is your first time encountering them). We can define filters globally or locally, just like directives.
Filters can be used to apply common formatting to text or heavy filtration to an array or object. They are JavaScript functions, so we can define them to take as many arguments as possible. Also, we can chain them and use multiple filters as well. Cool right?
Let’s define a simple filter to capitalize the first word of the body of text (this is really useful when displaying things like names supplied by your user):
https://medium.com/media/a02206cb907c20a2eab83df4d7366b59/href
And to use this, we can do the following in our template:
<template>
<div>
<p>{{ firstname | capitalize }}</p>
</div>
</template>
Now, anywhere we use this filter, the first character will always be capitalized.
Bringing it together
We are going to compose a simple Vue application using everything we have learned. You can try it out on codepen and play with it in realtime to see what you can get out of it.
First, let’s define our mixin:
https://medium.com/media/ec55daa6a8d8d0909e072c8e465580f6/href
Then we define our directive:
https://medium.com/media/55af6b2cf41b5c31fedc58d6511c0c63/href
Now, let’s define our filter:
https://medium.com/media/c6cda4e1fe34bef74c19954a74f06e32/href
Then, let’s initialize our Vue application:
// [...]
new Vue({
mixins: [myMixin],
el: '#app'
})
Finally, the simple template to see if these things actually work:
<div id="app">
<p v-highlight>{{title | capitalize}}</p>
<p v-highlight="'red'">This is a red guy</p>
<p>{{'this is a plain small guy' | capitalize}}</p>
<div>
And that’s it.
Conclusion
Everything we mentioned here comes in handy when building applications that are likely to grow in complexity. You want to define many reusable functions or format them in a way that can be reused across components, so you do not have to define the same thing over and over again.
Most importantly, you want to have a single source of truth, dedicate one spot to make changes. I’m excited by the thought of the cool things you can now build with these features. Please do share them with me.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.
Top comments (0)