Building Applications with Spring 5 and Vue.js 2

Filters

Filters in Vue.js are different from the filters in Java EE. In a Vue application, you use filters to format texts in Mustache interpolations or v-bind expressions. A filter is a JavaScript function that takes an expression's value as its first argument. Vue.js provides two types of filter registration—globally with Vue.filter(), and locally with the filters property of a component's options.

In our Messages App, the default date and time format that we used on the message's createdAt property aren't looking good. Let's create a global filter, datetime, to provide a better format.

As a convention, we will put the filter file under the filters directory and name it in this format: ${filterName}.filter.js, similar to the names of the ...