How to use filters in Vue.js?

Filters can be used to format data in templates. They are applied in the mustache interpolations.

// main.js
import Vue from 'vue';

Vue.filter('capitalize', function(value) {
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

<!-- MyComponent.vue -->
<template>
  <p>{{ message | capitalize }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello'
    };
  }
};
</script>