In this tutorial, we are going to learn how to use create your custom filters in Vue.js. So what is a filter in Vue.js? A filter is a function that will accept a value and will return another value. Most of the filters are used for text formatting. In this example, we are going to create three different types of filters for text formatting which will be described below.

• capitalize Filter
  

  This filter will be used make the first letter of a word to be capitalized.

• allUpperCase Filter
  

  This filter will be used make the whole word to be upper case.

• allLowerCase Filter
  

  This filter will be used make the whole word to be lower case.

Let's write our front end HTML code. We will create an input textbox and allow a user to type in the value. Then, we display the word entered by user and format the input value using three filters we are going to create based on above 3 filter conditions.

<div id="app">
	<div class="form-group">
		<table>
			<tr>
				<td>Please enter a word:</td>
				<td><input type="text" v-model="myWord"/></td>
			</tr>
			<tr>
				<td>capitalize Filter :</td>
				<td>{{ myWord | capitalize }}</td>
			</tr>
			<tr>
				<td>allUpperCase Filter :</td>
				<td>{{ myWord | allUpperCase }}</td>
			</tr>
			<tr>
				<td>allLowerCase Filter :</td>
				<td>{{ myWord | allLowerCase }}</td>
			</tr>
		</table>
	</div>
</div>

The next step is to create our 3 filters function. Those functions are pretty simple. Here is the Javascript code.

const capitalize = function (str) {
	return str.charAt(0).toUpperCase() + str.slice(1);
};

const allUpperCase = function (str) {
	return str.toUpperCase();
};

const allLowerCase = function (str) {
	return str.toLowerCase();
};

const filters = {
	capitalize,
	allUpperCase,
	allLowerCase
};

The next step is to register our function into Vue.js object. We use arrow function to register our Vue.js filter as below.

Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

If you are not familiar with arrow function, you can register it like the old way you usually do.

Object.keys(filters).forEach(function (k) {
  return Vue.filter(k, filters[k]);
});

Or if you prefer a repetitive way, you can register it manually like below as well which I will not recommend as you repeating mostly the same line of code.

Vue.filter("capitalize", capitalize);
Vue.filter("allUpperCase", allUpperCase);
Vue.filter("allLowerCase", allLowerCase);

The final step is to initialize our Vue.js app script code. Here is the full Javascript code.

var app = new Vue({
  el: '#app',
  data: {
	myWord: ''
  }
})

You can see the demo of Vue.js filters below.