Vue.js 2 Design Patterns and Best Practices

Globally registered filters

If we wanted to use this filter elsewhere, we could abstract this function into its own file and reference our filter once again, or, we could register the date filter globally inside of our application. Let's abstract our convertDateToString function into its own file at src/filters/date/date.filter.js:

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

Afterwards we can define the filter inside of our main.js with the following interface: Vue.filter('filterName', filterFunction()). As we've abstracted the function into its own file we can import it and define it like so:

import Vue from 'vue';import App from './App.vue';import { convertDateToString ...