Create Custom Filters with Vue.js

In a Vue app, we can use filters to transform data in a template to a format that we want to display the items in.

In this article, we’ll look at how to create filters and use them in our template.

Global Filter

We can define a global filter by using the Vue.filter method to define a filter.

Global filters are available in any part of the app.

It takes the name of the filter as the first argument and a function that takes a value and returns the value transformed to something we want as the second argument.

For example, we can define a global filter and use it as follows:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{date | localeString}}
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js:

Vue.filter("localeString", function(value) {
  if (!value instanceof Date) return "";
  return value.toLocaleString();
});

new Vue({
  el: "#app",
  data: {
    date: new Date()
  }
});

In the code above, we defined a global filter with:

Vue.filter("localeString", function(value) {
  if (!value instanceof Date) return "";
  return value.toLocaleString();
});

It takes a value parameter, checks if it’s a Date instance, and returns value.toLocaleString() if it is to format the date into a date string.

We then used it by writing:

{{date | localeString}}

in our template.

Local Filter

We can define a local filter by adding the filter method to our filters object in our Vue component.

We can write it as follows:

index.js

new Vue({
  el: "#app",
  data: {
    date: new Date()
  },
  filters: {
    localeString(value) {
      if (!value instanceof Date) return "";
      return value.toLocaleString();
    }
  }
});

In the code above, we moved our filter function into the root component. We reference the same way as we did we the global filter.

Filters can be chained. We just have to separate them with pipes. For example, we can write:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{date | localeString | lowercase}}
    </div>
    <script src="index.js"></script>
  </body>
</html>

index.js:

Vue.filter("localeString", function(value) {
  if (!value instanceof Date) return "";
  return value.toLocaleString();
});

Vue.filter("lowercase", function(value) {
  return value.toLowerCase();
});

new Vue({
  el: "#app",
  data: {
    date: new Date()
  }
});

We should then see our date string in lower case.

Also, we can pass in arguments into filters as follows:

{{ message | filterA('arg1', arg2) }}

Then 'arg1' will be passed in as the second argument and arg2 as the 3rd argument of our filter function.

Conclusion

We can define filters to transform data into a format that we want to displayed in.