How to create custom filters in Vue.js

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, 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.

Example How to write custom filters in separate file:

Here's an example:

// MyFilter.js
import Vue from 'vue';

Vue.filter('myFilter', value => {
  return value.toUpperCase();
});

// main.js
import './MyFilter.js';

If you don't want to register the filters globally, you can do it like this:

// MyFilter.js
export default function (value) {
  return value.toUpperCase();
}

// MyComponent.vue
import MyFilter from './MyFilter.js';

export default {
  filters: {
    MyFilter,
  },
};