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.
#vue-js #moment-js