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', ...

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.