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

Mixins and custom functions to enhance your Vue applications

December 10, 2018 4 min read1210

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:

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?

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

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.

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.