In this tutorial we take a look at filters in VueJs and how we can use them through a number of examples. We then go on to defining our own filters and using them throughout our Vue instance.

Be sure to read VueJs: The Basics tutorial before diving into this one to have a solid understanding of the basic concepts in VueJs.

The Basics of Filters in VueJs

Filters are simply functions that you can pass data into which gets processed and a filtered version of this data is returned. In Vue, the pipe symbol (|) is used to denote a filter like so:

{{ 'coligo' | uppercase }}

In this case we have a filter named uppercase and we are passing a string into it, which is transformed into all uppercase characters (COLIGO) and rendered onto the page.

Before the example above can work, we'll have to actually create the uppercase filter that we are using in the mustache interpolation. Thankfully, Vue gives us a clean and elegant way of defining our own filters that we can use with the pipe (|) notation.

A global filter is defined using the Vue.filter() constructor that takes 2 parameters:

  1. filter ID - a unique name for your filter
  2. filter function - a function that takes a value as a parameter and returns the transformed value

With that in mind, our uppercase filter can be defined as follows:

Vue.filter('uppercase', function (value) {
  return value.toUpperCase()
})

In the example below we bind the user input to the message variable and pass it into the uppercase filter. Go ahead and try it for yourself:

Alternatively, you can define a local filter, which can only be used within the component it was defined in - unlike the global filter in the example above which can be used across any Vue component. Instead of using the Vue.filter() method for defining a global filter, you can define a local one using the filters property like so:

new Vue({
  el: '#app',
  data: {
      message: 'coligo.io'
  },
  filters: {
      uppercase: function (value) {
        return value.toUpperCase()
    }
  }
})

Now you can use it anywhere within that specific Vue component in exactly the same way as we did earlier. The only difference is that no other component has access to this filter. It is usually better to define a filter in this way if you don't intend to use it in other components.

Chaining Filters

VueJs allows you to chain multiple filters to one other, passing the output of one filter as the input to another. Let's use the following example:

Imagine we have an online store and we are having a 50% discount on all our products

To achieve this we can:

  • Create a filter called discount using the Vue.filter() constructor
  • Pass in the original price of each product and return the discounted price
Vue.filter('discount', function (value) {
    return value * 0.5
})

Vue.filter('currency', function (value) {
    return '$' + value.toFixed(2)
})

new Vue({
  el: '#app',
  data: {
    products: [
      {name: 'microphone', price: 25},
      {name: 'laptop case', price: 15},
      {name: 'screen cleaner', price: 17},
      {name: 'laptop charger', price: 70},
      {name: 'mouse', price: 40},
      {name: 'earphones', price: 20},
      {name: 'monitor', price: 120}
    ]
  }
})

You can now use the discount filter, chained with the currency filter, like so:

<ul>
  <li v-for="product in products">
    {{ product.name }} - {{ product.price | discount | currency }}
  </li>
</ul>

This will now apply a 50% discount to all our products and pass the discounted price to the currency filter to maintain the formatting.

So that's great - we were able to define a discount filter to automatically apply a 50% discount. What if we wanted to apply a 25% discount? or a 10% discount?

Since this is a global filter and it can be used by any Vue component, it doesn't make much sense to hard code the discount percentage because that would mean any Vue component using this filter is forced to apply a 50% discount.

To avoid this, we can pass the amount of discount as an inline argument to our discount filter. We can now define our filter with a discount argument:

Vue.filter('discount', function (value, discount) {
    return value * ((100 - discount) / 100);
})

and we can simply pass in the amount of discount like so:

<ul>
  <li v-for="product in products">
    {{ product.name }} - {{ product.price | discount(25) | currency }}
  </li>
</ul>

In the example above, the product's price (product.price) will be passed to the discount filter as the first argument (value) and the discount of 25% will be passed as the second argument (discount) to the discount filter.

Here's what the finished product looks like:

Wrapping Up

That's it folks! Filters in VueJs are incredibly simple thanks to the clean and elegant pipe notation and the flexible Vue.filter() constructor. Now that you have the main concepts of filters down, you can start building your own filters and utilizing them within your projects for cleaner and more maintainable code.

If you haven't checked out the Components in VueJs tutorial yet, I'd encourage you to read it as they are just as easy to use, yet extremely powerful.