How to change date format using moment in Vue JS?

We will learn how to chage date format using filter with moment in vue js app. 

Install moment

npm install moment

Use moment 

src/main.js

import Vue from 'vue'
import App from './App.vue'
import moment from 'moment'
  
Vue.config.productionTip = false
Vue.filter('formatDate', function(value) {
  if (value) {
    return moment(String(value)).format('MM/DD/YYYY hh:mm')
  }
});
  
new Vue({
  render: h => h(App),
}).$mount('#app')

Create Example Component

src/components/Example.vue

<template>
  <div class="container" style="text-align:center">
    <div class="large-12 medium-12 small-12 cell">
      <h1 style="font-family:ubuntu">Vue js toggle button example - rathorji.in</h1>
  
        <p>{{ yourDateString | formatDate}}</p>
  
    </div>
  </div>
</template>
  
<script>
  export default {
    data(){
      return {
        yourDateString: '2018-12-24 04:19:23'
      }
    }
  }
</script>

You can now run this Example...