How it works...

The pipe sign indicates that the following is the name of a filter; in our case capitalize is not in Vue's list of filters, hence the warning. Vue will print the string as is.

What Vue will do before even starting is register our filter (with Vue.filter) in its asset library. Vue has an the internal filters object and will create a new entry: capitalize. Every time it sees the pipe symbol it will look for a corresponding filter. Remember to write it before the actual instantiation of a Vue instance because otherwise Vue will not find it.

The working of the filter is very basic JavaScript, in fact, a better way to write this filter with ES6 would be:

Vue.filter('capitalize', function (string) {  var [first, ...tail] = string ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.