DEV Community

Cover image for How to format dates in Vue

How to format dates in Vue

Joe Erickson on July 19, 2019

If you've used Vue for any length of time, you soon find that it doesn't have a lot of the fancy formatting options that some of the other framewor...
Read full post
Collapse
 
andreandyp profile image
André Michel Andy •

You can also define a global filter for using in all components:

// main.js

import Vue from "vue";
import VueResource from "vue-resource";

// Other code...

Vue.filter("capitalize", text => {
    return text ? text.charAt(0).toUpperCase() + text.slice(1) : "";
});

//Other code...

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount("#app");

Tested on single file components. Perhaps is the same with CDN version.

Collapse
 
firstclown profile image
Joe Erickson •

Yes. The filters are pretty handy. I'm planning writing a post about them soon. Thank you for pointing this out!

Collapse
 
terabytetiger profile image
Tyler V. (he/him) •

Wow! This could have saved me a bunch of time 😅 I've been using moment imported separately in my app 🙃

Collapse
 
firstclown profile image
Joe Erickson •

I was the same way! I think Moment is the answer everyone gives, but it's so much overkill for simple date formatting. I hope you find this useful for future projects!

Collapse
 
raymondcamden profile image
Raymond Camden •

Surprised to see no mention of Intl. :) I wrote up an article on using Vue with it: vuejsdevelopers.com/2018/03/12/vue...

Collapse
 
omarmorales profile image
Omar Saúl Morales Ibarra •

I've used moment.js it's awesome!