Introduction
Vue 3 note (2026): The Filters API ( Vue.filter, filters: {}, {{ value | filter }}) was removed in Vue 3. Use computed properties or methods instead (see migration guide). The rest of this article documents the old Vue 2 approach for legacy code.
In Vue 2, a filter was essentially a function that takes a value, processes it, and then returns the processed value. Filters are not substitutes for methods, computed properties, or watch properties, because filters do not transform data, but only transform the output that the user sees.
Filters can be nested and like all functions can take arguments. When a filter is used, its context is set to the instance that refers to it, so the “this” keyword points to it.
List of sites that offer pre-made filters:
Vue 3 alternative (recommended)
Format values with a computed property or a method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { createApp, computed, ref } from "vue"; createApp({ setup() { const message = ref("hello world"); const camel = computed(() => message.value .toLowerCase() .replace(/(^|s)w/g, (letter) => letter.toUpperCase()) ); return { message, camel }; }, template: `<p>{{ camel }}</p>`, }).mount("#app"); |
Filter registration (Vue 2 only)
Filters can be registered globally and locally.
Local registration
|
1 2 3 4 5 |
filters: { filterName(value) { return // thing to transform } } |
Global registration
|
1 2 3 |
Vue.filter('filterName', function(value) { return // thing to transform }); |
NOTE:
The code defining the filter globally must be written before the code defining the instance
Example
In this example, we define a filter that transforms the text output so that the beginning of each new word begins with an uppercase letter.
|
1 2 3 4 5 6 7 8 9 10 |
Vue.filter('camel',function(str){ return str.toLowerCase().replace(/^w|sw/g, function (letter) { return letter.toUpperCase(); }) }) new Vue({ el: '#app', template: '<App/>', components: { App } }) |
Using filters
Filters can be implemented in two ways: mustache interpolations and v-bind expressions
a) Integration with interpolation
Filters are integrated as an interpolation expression by appending the expression they need to transform with the special character “|” (eng. pipe):
|
1 |
{{ message | nazivFiltera }} |
Filters can be added:
|
1 |
{{ message | filterA | filterB }} |
And since filters are actually functions, they can also receive arguments:
|
1 |
{{ message | filterA('arg1', arg2) }} |
Example
See the Pen Filter by Web Programming (@chos) on CodePen.
b) Integration with v-bind
|
1 |
<div v-bind:id="rawId | nameFilter"></div> |