Creating filters in Vue Js

As much as I love Angular, I had to switch to Vue js.

Angular has most of the pipes/filters built into it and Vue js is not, So I had to write my own pipe to format the date.  My Vue Js project is in TypeScript (yeah I know, typical .net dev’s choice ;))

create a folder called filters in the root of the app and create a file called formatdate.ts, below is the code for the filter.

import Vue from 'vue';
import moment from 'moment'
Vue.filter('format-datelong', function(value:any) {
    if (value) {
      return moment(String(value)).format('DD MMM YYYY');
    }
})

now you need to make it available globally, therefore need to import it into the main file – which is app.vue

<template>
    <router-view></router-view>           
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import VeeValidate from "vee-validate";
import "./filters/formatdate";
Vue.use(VeeValidate);

@Component
export default class App extends Vue {}
</script>

Now you can use it anywhere in the app like this.

.....
<td>{{school.StartDate | format-datelong}}</td> 
.....

Enjoy!