Filters in Vue.js: What are they, how do you use them, and how do you make them? (video)

Using filters in Vue.js, you are able to manipulate the appearance of a variable without altering the actual value. This is done in the template by using the pipe (|) character. For example:

{{ message | lowercase }}

To create this filter, add a filters object to the Vue or component instance. Within this, create a new function which accepts one parameter and returns a value:

 new Vue({
	el: '#app',

	filters: {
		lowercase(val) {
			return val.toLowerCase();
		}
	},

	data: {
		message: 'Hello World'
	}
});

With the basics of filtering under your belt, we can progress onto slightly more advanced filtering - with a more practical example.

 VAT Calculator #

A realistic example would be a VAT calculator. Wanting to use the percentage as a decimal (e.g. 20% = 0.2) but display in a user-friendly way, we can use filters to accomplish this.

The initial app JavaScript will look like the following:

new Vue({
	el: '#app',

	data: {
		price: 0,
		vat: 0.2
	},

	computed: {
		amount() {
			let price = parseFloat(this.price),
				vat = price * this.vat;
			return price + vat;
		}
	}
});

Create the HTML to match the JS. This should have an input field bound to the price variable using v-model, the VAT rate output (vat) and the amount variable being output

<div id="app">
	Price ext vat: <input v-model="price">
	<h3>Vat percent: {{ vat | percent }}</h3>
	<h3>Price with vat: {{ amount | currency }}</h3>
</div>

On both the vat and amount variables, add filters for percent and currency respectively.

The percent filter will convert a decimal to a percent - by multiplying the amount by 100 and then adding a % sign.

The currency filter will use toLocaleString to convert the number to a human-readable price.

Within the app JavaScript, create two the two new filters and their functionality:

new Vue({
	el: '#app',

	filters: {
		percent(val) {
			return val * 100 + '%';
		},

		currency(val) {
			return val.toLocaleString('en-GB', {
				style: 'currency',
				currency: 'GBP'
			});
		}
	},

	data: {
		price: 80,
		vat: 0.2
	},

	computed: {
		amount() {
			let price = parseFloat(this.price),
				vat = price * this.vat;
			return price + vat;
		}
	}
});

The VAT and amount now read a lot better, without the original values be altered.

Errata #

A couple of differences/issues that have been pointed out/I've noticed with the video. Unfortunately, you can't re-upload Youtube videos and keep the same URL, so I will have to list them here:

Initialising #

When initialising a Vue filter, you can either do it as described in the video, via an object on the Vue instance or component or, alternatively, you can use vue-filter - much as you would vue-component. An example of the percent one above would be:

Vue.filter('percent', function(val) {
	return val * 100 + '%';
});

Variables & arguments #

In the video, I state that filters only accept one argument - this is incorrect and they can, in fact, accept many. A use case would be if you didn't want to hardcode the GBP in the currency filter, you could pass this is as an argument like so:

<h3>Price with vat: {{ amount | currency('GBP') }}</h3>

With the javascript being updated as you would expect:

new Vue({
	el: '#app',

	filters: {
		percent(val) {
			return val * 100 + '%';
		},

		currency(val, currency) {
			return val.toLocaleString('en-GB', {
				style: 'currency',
				currency
			});
		}
	},

	...
});

Using ES6, we do not need to specify currency: currency in the toLocaleString function.