Vue.js Filters

Applying Filters For Text Formatting

Vue.js allows you to define filters that can be used to apply common text formatting.

Filters are usable in two places:

i. mustache interpolations 
 {{ message | capitalize }}
 ii. v-bind expressions.
 <div v-bind:msg=”message | capitalize “></div>

You can define a filter locally in a component’s options or globally before creating the Vue instance:

filters: { 
 capitalize: function (value) {
   if (!value) 
     return ‘’
   value = value.toString()
   return value.charAt(0).toUpperCase() + value.slice(1)
 } 
}
Vue.filter(‘capitalize’, function (value) { 
 if (!value) return ‘’
 value = value.toString() 
 return value.charAt(0).toUpperCase() + value.slice(1)
 }) 
new Vue({ // … })

When the global filter has the same name as the local filter, the local filter will be preferred.

Filters can be chained:

{{ message | filterA | filterB }}

Filters are JavaScript functions, therefore they can take arguments:

{{ message | filterA(‘arg1’, arg2) }}

Filters are removed from Vue 3.0 and no longer supported.

It has been recommended to replace them with method calls or computed properties.

If you are using filters that were globally registered and then used throughout your app, it’s likely not convenient to replace them with computed properties or methods in each individual component.
Instead, you can make your global filters available to all components through globalProperties.

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer