Filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data.
They don’t change a component data or anything, but they only affect the output.
Say you are printing a name:
<template>
<p>Hi {{ name }}!</p>
</template>
<script>
export default {
data() {
return {
name: 'Flavio'
}
}
}
</script>
What if you want to check that name
is actually containing a value, and if not print ‘there’, so that our template will print “Hi there!”?
Enter filters:
<template>
<p>Hi {{ name | fallback }}!</p>
</template>
<script>
export default {
data() {
return {
name: 'Flavio'
}
},
filters: {
fallback: function(name) {
return name ? name : 'there'
}
}
}
</script>
Notice the syntax to apply a filter, which is | filterName
. If you’re familiar with Unix, that’s the Unix pipe operator, which is used to pass the output of an operation as an input to the next one.
The filters
property of the component is an object. A single filter is a function that accepts a value and returns another value.
The returned value is the one that’s actually printed in the Vue.js template.
The filter, of course, has access to the component data and methods.
What’s a good use case for filters?
- transforming a string, for example, capitalizing or making it lowercase
- formatting a price
Above you saw a simple example of a filter: {{ name | fallback }}
.
Filters can be chained, by repeating the pipe syntax:
{{ name | fallback | capitalize }}
This first applies the fallback
filter, then the capitalize
filter (which we didn’t define, but try making one!).
Advanced filters can also accept parameters, using the normal function parameters syntax:
<template>
<p>Hello {{ name | prepend('Dr.') }}</p>
</template>
<script>
export default {
data() {
return {
name: 'House'
}
},
filters: {
prepend: (name, prefix) => {
return `${prefix} ${name}`
}
}
}
</script>
If you pass parameters to a filter, the first one passed to the filter function is always the item in the template interpolation (name
in this case), followed by the explicit parameters you passed.
You can use multiple parameters by separating them using a comma.
Notice I used an arrow function. We avoid arrow function in methods and computed properties generally because they almost always reference this
to access the component data, but in this case, the filter does not need to access this but receives all the data it needs through the parameters, and we can safely use the simpler arrow function syntax.
This package has a lot of pre-made filters for you to use directly in templates, which include capitalize
, uppercase
, lowercase
, placeholder
, truncate
, currency
, pluralize
and more.
Download my free Vue Handbook
More vue tutorials:
- An overview of Vue.js
- The Vue.js CLI: learn how to use it
- The Vue.js DevTools
- Configuring VS Code for Vue Development
- Create your first app with Vue.js
- Vue.js Single File Components
- Vue.js templates and interpolations
- Vue.js Directives
- Vue.js Methods
- Vue.js Computed Properties
- Styling Vue.js components using CSS
- Vue.js Watchers
- Vue methods vs watchers vs computed properties
- Vue.js Filters
- Vue.js Components
- Vue.js Slots
- Vue.js Component Props
- Vue.js Events
- Vue.js Components Communication
- Vuex, the Vue.js State Manager
- Vue, use a component inside another component
- Vue, how to use a prop as the class name
- How to use SCSS with Vue.js Single File Components
- Using Tailwind with Vue.js
- The Vue Router
- Dynamically show a Vue component
- The Vue.js Cheat Sheet
- Store Vue data to localStorage using Vuex
- How to dynamically apply a class using Vue
- Vue, how to use v-model
- Vue, why data must be a function
- Roadmap to become a Vue.js developer in 2020