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!