Creating Vue.js Filters with Namespace

Vue.js Filters with Namespace

Namespacing is very important whichever application you are making. This gives rise to Vue.js Custom Filters that can be declared at the Global Level without much problem. In the last Tutorial, you saw how to utilize filters and how can we define it within the main Application itself. There are situations when the separation of concern is necessary and one has to deal with it irrespective of the changes done. In this article, we will make three filters and separate them using Vue.filter() method. This particular method goes as follows

Vue.filter('Filter Name/id',[Filter Definition])

With the above definition, we can be very comfortable defining multiple separate filters. In the example below I have defined three different Global Filters, These filters look alike in the structure but do different things. We have also provided it with a name space called date_format which it utilizes in order to stay categorized. Let’s have a look at these filters.

NOTE: IF you have not set up your workspace yet 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?

Vue.filter('date_format.MM/DD/YYYY', function(value) {
  return moment.unix(value).format('MM/DD/YYYY')
});

Vue.filter('date_format.MMMM Do YYYY, h:mm:ss a', function(value) {
  return moment.unix(value).format('MMMM Do YYYY, h:mm:ss a')
});

Vue.filter('date_format.dddd', function(value) {
  return moment.unix(value).format('dddd')
});

Now from the above sample, it’s clear that each filter does some data manipulation and then it returns the value back to the application. This also leads to separation of filters and leads to a proper code where we maintain name space as well. The HTML implementation of the above will go as follows:-

<div id="app">
  <span>Date in MM/DD/YYYY  -->  {{date | date_format.MM/DD/YYYY}}</span>
  <br>
  <span>Date in MMMM Do YYYY, h:mm:ss a  -->  {{date | date_format.MMMM Do YYYY, h:mm:ss a}}</span>
  <br>
  <span>Date in dddd  -->  {{date | date_format.dddd}}</span>
</div>

The resultant data is being formatted Values. The app module will be bootstrapped by the below-mentioned code.

var app = new Vue({
  el: '#app',
  data: {
    date: 1501288640
  }
});

Now let’s see it all together in action. You can go to JSFiddle or alternatively have a look at the

Conclusion

Hopefully, you guys are clear now about the way the filters can be separately written irrespective of the app. This also makes the application maintainable and Scalable as we move ahead developing multiple components. Alternatively, I will also ask you guys to have a look at the entire tutorial series so that you can get along various aspects of Vue.js.

Originally published at The Web Juice.