How to Create Custom Filters in Vue.js?

Custom Filters in Vue.js

Custom filters are very easy to create using Vue.js. Filters are very useful in Text Formatting. These filters become a part of the JavaScript string that is being used for Interpolation in the HTML and goes with the pipe in between. In this particular article, we will create filters for Formatting DateTime value. We will be using Moment in conjunction to Vue.js and utilize various DateTime formats.

NOTE: IF you have not set up your workspace yet or have not started with Vue.js, you always can refer to these Tutorials to get started
  1. An introduction to Vue Framework?
  2. Getting Started with Vue using Fiddle
  3. Learn Fast Handling User Inputs & form bindings using Vue
  4. Easily Bind Select and Multi-select using Vue
  5. Learn to make a ToDo List — Vue Component Creation
  6. Vue ToDo list with Delete Option & Global Event Bus — Part II
  7. How to Create Global Event Bus using Vue.js?
  8. Learn how to work with Computed Properties in VueJS
  9. How to Use Vue.js watchers for Async Updates?
  10. Make a Basic HTML Editor using Vuejs v-html directive
  11. Prevent XSS in Vue.js using Google Caja
  12. How does Event Handling work in Vue.js?

Implementation of Custom Filters in Vue.js using Moment

In this example, we are using JSFiddle. If you are unaware how to use JSFiddle with Vue.js Please have a look at the Vue.js with JSFiddle Tutorial. The basic syntax is as follows:-

var vue = new Vue({
data:{},
filters:{
customFilter:function(){
}
}
});

This will generate Global Filter that can be applied to the Sample App. In order to apply any filter you just need to add a pipe. So have a look at the sample below

<span>{{data | customFilter}}</span>

Now as this is being told, we will look at a sample application which uses Moment.js and helps you write custom formats for DateTime. So the HTML code looks like follows:-

<div id="app">
<table border=1>
<tr>
<th class="invalid">Format</th>
<th>Result</th>
</tr>
<tbody>
<tr>
<td>MMM Do YYYY</td>
<td>{{date | MMMMDoYYYY}}</td>
</tr>
<tr>
<td>YYYY-MM-DD HH:mm</td>
<td>{{date | YYYY_MM_DD_HH_mm}}</td>
</tr>
<tr>
<td>dddd, MMMM Do YYYY, h:mm:ss a</td>
<td>{{date | dddd_MMMM_Do_YYYY_h_mm_ss_a}}</td>
</tr>
</tbody>
</table>
</div>

The Vue.js code looks like the following:-

var vue = new Vue({
el: '#app',
data: {
date: 1501283339
},
filters: {
MMMMDoYYYY: function(value) {
return moment.unix(value).format('MMM Do YYYY');
},
YYYY_MM_DD_HH_mm: function(value) {
return moment.unix(value).format('YYYY-MM-DD HH:mm');
},
dddd_MMMM_Do_YYYY_h_mm_ss_a: function(value) {
return moment.unix(value).format('dddd, MMMM Do YYYY, h:mm:ss a');
}
}
});

Let’s have a look at the code above. What you see is the filter property has various other sub properties with closures associated with them. All the filters that are being applied to a data transform the data into a specific way in order to get the result. You can see it’s just data formatting and returning it out. The output of the entire program above is as follows:-

Vue.js Custom Filter using Moment.js

Vue.js Custom Filter using Moment.js

JSFiddle implementation

NOTE: If you have a complicated Data Manipulation then it’s always better to use Computed property rather than filters. Filters are designed for Text Transformation purpose only and must not be abused.

Conclusion

Hope this particular example has shown you how to implement Custom Filter. But in all true sense, this particular sample just dealt with Data Manipulation on a greater part and we also tried to showcase how Custom Filters can be simply implemented and can be utilized in almost any scenario. It is always good to have few Custom Filters Created as global so that the app developers have a good time handling them. You can alternatively have a look at the custom filters out here. You can also look at all the Vue.js Tutorials out here.


Originally published at The Web Juice.