To save us time from creating our own filters in our Vue app, we can use the vue-filters plugin.
It has filters for basic string formatting operations like capitalization, changing case, truncating strings, and more.
Also, it has filters for formatting numbers like percent, currency, and bytes.
There are also array manipulation filters.
To install it, we run:
npm install vue2-filters
Then we can register it in main.js
as follows:
import Vue from "vue";
import App from "./App.vue";
import Vue2Filters from "vue2-filters";
Vue.use(Vue2Filters);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
We called Vue.use(Vue2Filters);
to register the plugin globally.
Then we can use the filters.
String Filters
We can use the capitalize
filter by writing:
<template>
<div id="app">{{ 'abc' | capitalize }}</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then abc
is displayed as Abc
.
Likewise, we can do the same for the other string filters.
The uppercase
filter can be used by writing:
{{ msg | uppercase }}
The lowercase
filter can be used the same way:
{{ msg | lowercase }}
The rest of the string filters follow the same pattern.
The truncate
filter can be used to cut off text.
For instance, we can write:
<template>
<div id="app">{{ msg | truncate(10) }}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
msg: "hello world, james"
};
}
};
</script>
Then we get hello worl...
displayed.
The argument is for the number of characters to truncate to. The ‘…’ isn’t included in the count.
Number Filters
The number filters can be used to format numbers.
For instance, we can specify the number format with the number
filrter.
We can write:
{{ 123456 | number('0,0') }}
Then we use ,
as the decnimal separator.
So we get 123,456
displayed.
We can specify the number of decimal digits we display by changing the number of digits after the decimal separator.
For instance, we can write:
{{ 12345.67 | number('0.0000') }}
Then we get 12345.6700
displayed.
We can also add a plus or minus sign to the format string:
{{ 123456 | number('+0') }}
{{ 123456 | number('-0') }}
Then we get +123456
and -123456
respectively.
We can display K
for thousand and M
for million with the a
formatting tag:
{{ 222222 | number('0 a') }}
Then we get 222 K
displayed.
if we write:
{{ 222222222 | number('0a') }}
Then we get 222M
displayed.
We can also change thousands separator. It can be changed to anything we want.
We can write:
{{ 1234567 | number('0,0', { thousandsSeparator: ' ' }) }}
Then we see 1 234 567
on the screen.
Also, we can change the decimal separator.
If we write:
{{ 12345.67 | number('0.00', { decimalSeparator: '|' }) }}
Then we get 12,345|67
on the screen.
Display Bytes
We can display numbers as the number of bytes.
For instance, we can write:
{{ 3000000 | bytes }}
Then we get 2.86 MB
on the screen.
We can change the number of decimal points by passing in an argument:
{{ 3000000 | bytes(3) }}
We have 2.861 MB
displayed.
Display Percentages
We can use the percent
filter to display percentages.
If we have:
{{ 0.05 | percent }}
We have 5%
displayed.
We can adjust the decimal point the same way.
If we write:
{{ 0.97574849 | percent(3) }}
We see 97.575%
.
Also, we can change the multiplier:
{{ 0.97574849 | percent(3, 150) }}
And we get 146.362%
. The filter multiplies 150 by 0.97574849 to get that value.
Currency
vue2-filters also comes with a filter to format currencies.
We can write:
{{ 123.45 | currency }}
And we get $123.45
.
The currency symbol can be changed. For instance, we can write:
{{ 123.45 | currency('£') }}
We get £123.45
.
The number of decimal places can be changed.
We write:
{{123.45 | currency('£', 0)}}
to remove decimals. So we get £123
.
Thousands separator can be changed with:
{{ amount | currency('$', 0, { thousandsSeparator: '.' }) }}
The decimal separator can be changed with:
{{ amount | currency('$', 2, { decimalSeparator: ',' }) }}
We can move the currency symbol to the right with:
{{ amount | currency('$', 0, { symbolOnLeft: false }) }}
Pluralization
This package has the pluralize
filter for adding singular or plural words.
For instance, we can write:
{{ count }} {{ count | pluralize('item') }}
Then if count
is 2, we get 2 items
.
We can add our own words for singular and plural.
For instance, we can write:
{{ count }} {{ count | pluralize(['car', 'cars']) }}
Then if count
is 1, we get 1 car
. If count
is 2, we get 2 cars
.
Ordinals
The ordinal
filter formats the number into an ordinal number.
For instance:
{ 1 | ordinal }}
displays as st
.
Limit Array Items to Display
There’s the limitBy
filter to limit the number of array items to display.
For instance, we can write:
<div v-for="item in limitBy(items, 20)">{{ item }}</div>
to display the first 20 items.
If we write:
<div v-for="item in limitBy(items, 20, 5)">{{ item }}</div>
To display the 5th to 25th item, we pass in 5 as the 2nd argument, and 20 to display 20 items.
Filter Items
The filterBy
filter lets us filter by values of property values.
For instance, we can write:
<div v-for="item in filterBy(items, 'james')">
to display the entries with the string 'james'
in it.
If we want to filter by a value in a property, we can write:
<div v-for="user in filterBy(users, 'james', 'name')">
Then we only display items with the name
property value that includes 'james'
.
We can have multiple properties:
<div v-for="user in filterBy(users, 'james', 'firstName', 'lastName')">
Then the filter searches for strings with 'james'
in the firstName
and lastName
fields.
The find
filter is like filter
but only displays the first item.
Conclusion
There are many filters in the vue2-filters package. It saves us lots of effort from formatting strings and numbers.
It also saves us from having to filter array entries ourselves.