Questions And Answers

More Tutorials

VueJs Custom Filters


• Vue.filter(name, function(value){}); //Basic
• Vue.filter(name, function(value, begin, end){}); //Basic with wrapping values
• Vue.filter(name, function(value, input){}); //Dynamic
• Vue.filter(name, { read: function(value){}, write: function(value){} }); //Two-way


Parameter Details
name String - desired callable name of the filter
value [Callback] Any - value of the data passing into the filter
begin [Callback] Any - value to come before the passed data
end [Callback] Any - value to come after the passed data
input [Callback] Any - user input bound to Vue instance for dynamic results


Two-way Filters

With a two-way filter, we are able to assign a read and write operation for a single filter that changes the value of the same data between the view and model.

Vue.filter('uppercase', {
 //read : model -> view
 read: function(value) {
 return value.toUpperCase();
 //write : view -> model
 write: function(value) {
 return value.toLowerCase();
 * Base value of data: 'example string'
 * In the view : 'EXAMPLE STRING'
 * In the model : 'example string'


Custom filters in Vue.js can be created easily in a single function call to Vue.filter.

Vue.filter('reverse', function(value) {
 return value.split('').reverse().join('');
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'

It is good practice to store all custom filters in separate files e.g. under ./filters as it is then easy to re-use your code in your next application. If you go this way you have to replace JS part:
Vue.filter('reverse', require('./filters/reverse'));

You can also define your own begin and end wrappers as well.
Vue.filter('wrap', function(value, begin, end) {
 return begin + value + end;
<span>{{ msg | wrap 'The' 'fox' }}</span> //'quick brown' => 'The quick brown fox'


In this page (written and validated by ) you learned about VueJs Custom Filters . What's Next? If you are interested in completing VueJs tutorial, your next topic will be learning about: VueJs Data Binding.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.