Vue.js 2 Cookbook

How to do it...

Sometimes we have some strings floating around in our variables like labels. When we put them in the middle of a sentence they work fine, but on the other hand they don't look very good at the beginning of a sentence or bullet point.

We want to write a filter that will capitalize whatever string we put into it. If, for example, we want the string hello world to start with a capital H, we'd like to be able to write:

{{'hello world' | capitalize }}

If we try to run this as HTML in a Vue app, it will complain [Vue warn]: Failed to resolve filter: capitalize.

Let's create the filter and add it to Vue's internal list of filters:

1. Write the following JavaScript to register a filter and instantiate Vue:

 Vue.filter('capitalize', ...