Knowing and developing filters in Vue.js

Hi guys!

In this article, in a special way, I will talk about a feature that in my opinion is little used (or commented on) within the Vue.js community, which are Filters. Like Plugins, Custom Directives and Mixins, filters are part of the reusable features within Vue, helping in the process of creating components.

In Vue components, filters are functionalities that allow us to obtain different formats in the output of the dynamic data of its state. That is, they do not change the data of a component, they can only format their data in rendering.

Local filters

According to the official documentation, the use of filters occurs within mustache interpolations and v-bind expressions. See an example of the formatting of the filter in the template:

<!-- in interpolations text --> 
{{ message | capitalize }}  
<!-- in attribute interconnections --> 
<div v-bind:text="message | capitalize"></div>

Creating locally, within the component, we can have:

filters: {
   capitalize(value) {
     if (!value) return ''
     value = value.toString()
     return value.charAt(0).toUpperCase() + value.slice(1)
   }
}

In this first example, extracted from the documentation itself, we can analyze that the capitalize function just takes the value through and does the treatment with the necessary methods to obtain the result, with no interference in the original value of the component's state.

In some situations, the Filters can be very similar to the Computed Properties, with the difference that in the filters, the data is not transformed, they just change the output and return a version with the determined filtering of the information. Thus, a new value is not generated for that component data.

Global Filters

There are certain situations where a particular filter can be used on several components within your application, especially in those larger projects, where several interactions of the system can occur throughout the project.

For this, there is the possibility of creating global filters, and just as I said earlier, equally to mixins, plugins, among others, they are available anywhere in your project, facilitating their use and the reuse of codes.

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

In this example, we see the creation of a global filter, using the .filter property inside the main.js. If your application uses many filters, for organization reasons, it is recommended to create a separate file and place all filters in them and import them into the main.js file. And there is a detail that is very important and should always be remembered: when a global filter has the same name as a local filter, the local filter will have priority.

Since filters are JavaScript functions, they accept the value to be transformed as the first parameter. You can also pass as many arguments as you need according to the needs of your application.

{{ message | filterA('arg1', arg2) }}

Just as we can pass several arguments, it is possible to link several filters, for that we just need to use the pipe symbol (|) and through several transforming filters, we obtain a single value.

filters: {
    Upper(value) {
       return value.toUpperCase();
    },

    Lower(value) {
       return value.toLowerCase();
    },
}

And within the value, we use it as follows:

{{ message | Upper | Lower }}

Of course, this example would have no functionality, but just to exemplify that it is possible to put several filters within a single value, and as I mentioned that they are chained, the Lower function will be executed after obtaining the result of Upper, being passed as the only one Lower's argument.

Explore your knowledge and studies a little in this Vue.js feature that allows you to help with various tasks in your applications. See more in the official documentation.

---

If you liked this article, be sure to share and comment. If you want to know a little more, exchange some ideas, you can leave your opinion on the subject in the comments and even suggest something for the next articles.

Enjoy and get to know a little of my work, visit the website www.fsenaweb.me, it has my portfolio, my social networks (including GitHub, where you have some sample applications to practice with Vue.js), and a small space for contacts.

And be sure to join our group and Vue.js in Brazil, through Telegram (VueJS Brasil), has a very special gallery ready to exchange other experiences.

That's it, see you next time! My name is Matheus Ricelly, and for your attention, my thanks!