Change Date Format Using Moment Js In Vue App

Hello devs,

In this tutorial, I will show you how to change date format in vue js application. We will format date like dd-mm-yyyy using moment js in vue application. If you do not know how to format date or filter date in vue js application with moment js then this tutorial is for you.

Let's see the example code of how to format date in vue js application using moment js.

Step 1 : Install moment js

First, we need to install moment npm package in our Vue app that will allow us to change the date format in vue.js.

npm install moment

Step 2: Use moment main.js file

In this step, we need to use the moment package in the main.js file of Vue js app.

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')

Step 3 : Create Test Component

Here, we will create Test.vue component with the following code.

src/components/Test.vue

Now you have to run vue app by using the following command:

npm run serve

Now you can check it. Hope it can help you.