Categories
JavaScript Vue

Save Time From Creating Vue Filters with vue2-filters

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *