Vue.js 2 Design Patterns and Best Practices

Locally registered filters

We then have a choice: add the filter locally to this Vue instance, or add it globally to the entire project. We'll first look at how to add it locally:

First, we'll create a function that takes in a value and returns the date as a formatted date using moment:

const convertDateToString = value => moment(String(value)).format('MM/DD/YYYY');

We can then add a filters object to our Vue instance and reference this by a key, such as date. When we call the date filter inside of our template, the value will be passed to this filter and instead, we'll display the converted date on screen. This can be done by using the | key, as seen in the following code:

 <ul>  <li v-for="person in people" v-bind:key="person.id"> {{person.name}} ...