JS preacher. Developer 🥑. Building the web with the community @concatenateConf @forLoopAfrica. JS & Senior Advocacy for the Next Billion Users thru @Microsoft

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 <vue-custom></vue-custom> 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:

export const myMixin = { data() { return { title: 'Mixins are cool', copyright: 'All rights reserved. Product of super awesome people' }; }, created: function() { this.greetings(); }, methods: { greetings: function() { console.log('Howdy my good fellow!'); } } };

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:

// Register a global custom directive called `v-highlight` Vue.directive('highlight', { // When the bound element is inserted into the DOM... inserted: function(el, binding) { // set the colour we added to the bind el.style.backgroundColor = binding.value ? binding.value : 'blue'; el.style.fontStyle = 'italic'; el.style.fontSize = '24px'; } });

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):

Vue.filter('capitalize', function(value) { if (!value) return ''; value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); });

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:

const myMixin = { data() { return { title: 'mixins are cool' }; }, created: function() { alert('Howdy my good fellow!'); } };

Then we define our directive:

// [...] Vue.directive('highlight', { inserted: function (el, binding) { el.style.color = binding.value ? binding.value : "blue" el.style.fontStyle = 'italic' el.style.fontSize = '24px' } })

Now, let’s define our filter:

// [...] Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })

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.

Experience your Vue apps exactly how a user does Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, https://logrocket.com/signup/ Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket LogRocket is like a DVR for web apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred. Modernize how you debug your Vue apps - Start monitoring for free.