Getting Started With Vue Filters

Vue allows you to format your text with filters. It’s a big advantage since writing, integrating and using filters are easy. Let’s cover the basics about filters with some real-life examples.

Getting Started With Filters

Filters are for formatting some text. We can use the filters in the mustache interpolations and in v-bind expressions.

<!-- mustache interpolation -->
{{ amount | numeric }}

<!-- v-bind expression -->
<span v-bind:text="amount | numeric"></span>

The awesome thing in filters is that we can also pass them extra parameters and we can chain them.

<!-- chaining -->
{{ amount | numeric | currency }}

<!-- extra params -->
{{ amount | currency('€') }}

As you see, with the pipe operator we can chain more filters after each other. Also, you can pass a parameter as it would be a simple function. Now let’s see how to add your own filters!

Give your project a solid foundation.

Writing Your Own Filters

Adding your own filters are quite easy. Basically you have two options, first, you can add closure based filters and the other option is to place them in their own file and import them. We suggest the second one, especially if you have many filters.

// filters/uppercase.js

export default value => {
    return value.toString().toUpperCase();
}

// app.js

import uppercase from './filters/uppercase';
Vue.filter('uppercase', uppercase);

In this case, we registered the filter globally, so we can use it anywhere in our Vue app. Now we see creating and using filters are easy, let’s move on and explore some handy filters that you can use in real projects.

Formatting Numeric Values

Imagine you have a long number that hard to read. It’s good to follow the best practice and make the large number readable by making groups and separate them by space. In code:

export default value => {
    return (value || 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
}

{{ 1000000000 | numeric }} <!-- 100 000 000 -->

Currency Formatting

Also, it can be handy to add currency symbols to the numeric value we have. As in the introduction section, it’s a good spot to chain filters and use parameters for the currency symbols.

export default (value, currency = '$') => {
    return value + ' ' + currency;
}

{{ 100000 | numeric | currency }} <!-- 100 000 $ -->

{{ 100000 | numeric | currency('£') }} <!-- 100 000 £ -->

Date Formatting

Formatting date values can be a huge pain. So it’s a good idea to use a library like moment to make it easier.

export default (value, format = 'YYYY-MM-DD') => {
    return format === 'human' ? moment(value).fromNow() : moment(value).format(format);
}

{{ someDateVar | date }} <!-- 2018-06-19 -->

{{ someDateVar | date('human') }} <!-- a day ago -->

Slugify The Value

In some cases, you may need to convert the given text to a slug. No problem, with filters you can easily do it. A huge advantage is that it’s getting updated in real-time, so all the changes will be visible immediately.

export default value => {
    return value.toString().toLowerCase().trim()
        .replace(/é|è|ẽ|ẻ|ẹ|ê|ế|ề|ễ|ể|ệ/gi, 'e')
        .replace(/á|à|ã|ả|ạ|ă|ắ|ằ|ẵ|ẳ|ặ|â|ấ|ầ|ẫ|ẩ|ậ/gi, 'a')
        .replace(/ö|ő|ó|ò|õ|ỏ|ọ|ô|ố|ồ|ỗ|ổ|ộ|ơ|ớ|ờ|ỡ|ở|ợ/gi, 'o')
        .replace(/ü|ű|ú|ù|ũ|ủ|ụ|ư|ứ|ừ|ữ|ử|ự/gi, 'u')
        .replace(/í/gi, 'i')
        .replace(/đ/gi, 'd')
        .replace(/ļ/gi, 'l')
        .replace(/\s*$/g, '')
        .replace(/\s+/g, '-')
        .replace(/[^\w\-]+/g, '')
        .replace(/\-\-+/g, '-')
        .replace(/^-+/, '')
        .replace(/-+$/, '');
}

{{ 'This is a title' | slugify }} <!-- this-is-a-title -->

{{ 'Választékosan és helyesen írni nem könnyű' | slugify }} <!-- valasztekosan-es-helyesen-irni-nem-konnyu -->

Summary

As you see, with Vue filters we have a lot’s of flexibility. It’s a good concept to store them in their own file and import them. It helps to keep the code a bit cleaner and all the logic is separated by the others.

If you are interested more about filters, you can dig deeper in the docs.