Introduction to Vue.js Filters

A simple Vue.js filter

Vue.js filters doesn't actually change the underlying data, it just changes the output. So if you apply a filter to a variable and use the same variable a different place on your website, the value is still the original.

Let's say that you have a component where you want to show a message, but if it's more than 20 characters long, you truncate it and add three dots at the end. Here is an example of how you can achieve that using a filter:

<div id="app">
  <p>{{ message|truncate }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js! This is a message that is longer than 20 characters long.'

  },
  filters: {
    truncate: function(value) {
      if (value.length > 20) {
        value = value.substring(0, 17) + '...';
      }


      return value

    }
  }
})
</script>

We can make some edits to this filter and make it possible to pass one more value to the filter. This value can be the maximum number of characters allowed.

<div id="app">
  <p>{{ message|truncate(20) }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js! This is a message that is longer than 20 characters long.'

  },
  filters: {
    truncate: function(value, limit) {
      if (value.length > limit) {
        value = value.substring(0, (limit - 3)) + '...';
      }


      return value

    }
  }
})
</script>

Chaining Vue.js filters

A cool thing about filters in Vue is that they can be chained. So instead of adding the three dots in the truncate filter, we'll create another filter for adding tailing content.

<div id="app">
  <p>{{ message|truncate(20)|tailing('...') }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js! This is a message that is longer than 20 characters long.'

  },
  filters: {
    truncate: function(value, limit) {
      return value.substring(0, limit)
    },
    tailing: function(value, tail) {
      return value + tail;
    }
  }
})
</script>

I know that seemed like a weird example and it's not something you would do in the real world, but it shows how you can chain filters in a simplified way.

There are tons of things you can do with filters and I encourage you to try to build some for your self. It's also possible to download packages containing smart filters like truncate, capitalizing, transforming and similar. vue-filter is a package containing a lot of different things you often need. You don't always need to reinvent the wheel, but it's nice to know how something works.

Vue.js comes with a lot of cool features besides filters. Read more about Vue.js here on A Hacker's Day:
Introduction to Vue.js Props
Introduction to Vue.js Slots
Communicating between Vue.js components