home / blog / Dev Tips
Dev Tips

How to Use VueJS Filters to Write Better Code

Most VueJS developers are extremely familiar with computed properties. They’re a great way to design more readable code and declutter your template.

However, in certain cases, there’s a better solution that can make even more reusable code: VueJS Filters.

By the end of this article, you should have a solid idea of when, why, and how to implement VueJS filters into your projects.

3…2...1…Filter time!

How to Use VueJS Filters

First, we have to understand what exactly are VueJS Filters. Simply put, filters are a way in Vue 2 give us a way to create reusable text transformations.

Vue Filters differ from computed properties in two ways.

  • Computed properties are dependent on specific properties whereas filters can be reused on different values

  • Computed properties can be used on all properties while filters are primarily meant for text transformations

Going off number 2, because VueJS filters are meant for text transformations, they can only be used in two places: mustache interpolations (the curly braces in your template) and in v-bind expressions.

Computed properties are dependent on specific properties whereas filters can be reused on different values

So How Do We Code Them?

Coding a Vue filter should feel extremely familiar. Like defining computed properties or component methods in the Options API, just put them in your component options object inside a filters object.

For example, let’s say we want a preview filter that takes a String, returns the first 50 characters followed by an ellipsis. Inside our options object would look a little like this.

javascript
filters: {
  preview: (value) => {
    if (!value) {
      return "";
    }
    return value.substring(0, 50) + "...";
  };
}

There are a couple important things to note here. First, we did an error check to see if the value was null. Second, we have to make sure that we return the value.

But overall, pretty easy right? Now, let’s see how to add this to your template.

Using a Vue filter requires a simple syntax. The format goes value | filter

As stated previously, there are two times we can use computed properties: between curly braces in your template and when using v-bind

markup
<!-- Mustache Interpolation -->
{{ content | preview }}

<!-- using a v-bind: -->
<div :class='rawID | formatID' />

More Advanced Techniques

Now that we’ve covered the basics of Vue filters, there are several advanced tips and tricks that make them even more powerful.

After learning these tips, the sky’s the limit to the kind of filters you can add.

Declaring Global Filters

Our first implementation of filters went over using them locally, meaning that those filters will only be available to the component where we defined it. However, there are certain common filters that we would want available across our entire Vue project.

Examples could be generating a preview, date formatting, standardizing capitalization, and so on.

Luckily, just like other things in Vue, it’s easy to globally declare a filter. All we have to do is put use the Vue.filter function before initializing your Vue object.

main.js

javascript
Vue.filter("preview", (value) => {
  if (!value) {
    return "";
  }
  return value.substring(0, 30) + "...";
});
// init code
new Vue({
  /*...*/
});

Chaining Filters

It’s also possible to apply multiple filters to a single value.

This is pretty intuitive. All we have to do is insert another “pipe” after our first filter, and then declare our second filter. Something like this.

markup
{{ content | preview | capitalized }}

Now, both text transformations are applied to our original data.

Passing Arguments to Filters

Since Vue Filters are really just Javascript functions, we can pass them parameters. It generally works just the way you’d expect, but with one important thing you have to know.

No matter if you pass arguments or not, the value you want to modify will be passed as the first argument.

For example, if we want to add an argument to our preview filter that allows us to change the cutoff point, we can do that like this.

javascript
filters: {
  preview: (value, cutoff) => {
    if (!value) {
      return "";
    }
    return value.substring(0, cutoff) + "...";
  };
}

Then, when we declare our filter we just have to add a second parameter after our value. It would look like this.

markup
{{ content | preview(15) }}

The first parameter will be the value and the second, third, etc will be whatever we pass into the function.

Why Not Computed Properties

You may be asking, “Wait, can’t I just do this with computed properties?” And you can. However, that’s not always the best solution.

Like we were discussing earlier in the article, computed properties are just Vue watchers. As a result, they are bound to specific properties. This means they can’t be generalized and applied to all sorts of data.

One common example where it would be super useful to use a filter instead of a computed property is date formatting.

Let’s say we have a list of articles and we want to display the date of every single item. If we used computed properties, this would be extremely hard. We would need to create computed properties for each item – which for most real projects isn’t logistically possible.

However, if we used filters, we could just format each date like this.

markup
{{ article.date | formattedDate }} 
As a result, they are bound to specific properties. This means they can’t be generalized and applied to all sorts of data.

This makes it so much simpler, readable, and can save major headaches down the line.

Conclusion

Phew. We did it. The end of the article.

In short, VueJS filters can be a great way to implement reusable modifiers into your projects. They can be extremely powerful if used correctly and designing common filters should be one of the first steps of every Vue team.

Hopefully, you learned a thing or two or Vue filters and have thought of a few ways that you can implement it into your own projects.


Latest Posts

Top Tools

Getting Started with Vuex in Vue 3

Vuex is a state-management system following the Flux pattern that lets us create a global store with unidirectional data flow across our Vue 3 app.

Dev Tips

Improve Vue Performance with v-once + v-memo

Rendering performance is a vital metric for frontend developers. Improve your Vue app's performance with these two directives.

Top Tools

Making a Markdown-Based Blog with Vue and Gridsome

Use Vue with Gridsome is one of the easiest ways to create static websites from just Markdown files.

Top Tools

5 VueUse Library Functions That Can Speed Up Development

VueUse is an open-source project that provides Vue developers with a huge collection of essential Composition API utility functions for both Vue 2 and Vue 3.

Join the LearnVue Community

Every week we send out exclusive content to thousands of developers on our mailing list. 100% Free.