Filters

Filters

Filters transform data for display purposes. They do not change the underlying data — they only change how it is rendered in the template. Common uses include formatting text, dates, and currency.

Global Filter

// main.js
Vue.filter('capitalize', function(value) {
    if (!value) return '';
    return value.charAt(0).toUpperCase() + value.slice(1);
});

<p>{{ name | capitalize }}</p>

The pipe (|) passes the value through the filter function. name is the input; capitalize transforms it.

Local Filter

export default {
    filters: {
        snippet(value) {
            return value.slice(0, 100) + '...';
        },
        toUpperCase(value) {
            return value.toUpperCase();
        }
    }
};

Chaining Filters

<p>{{ title | capitalize | snippet }}</p>
<!-- capitalize runs first, then snippet -->

Key Takeaways

• Filters transform data for display using the pipe syntax: {{ value | filter }}
• They do not change the source data — only how it appears in the template
• Register globally with Vue.filter() or locally in the filters option
• Filters can be chained: {{ value | filterA | filterB }}