How to format dates in Vue 3

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 frameworks seem to have out of the box. I get the feeling that Vue is very focused on minimalism and adding features that aren’t core to the framework is not something they want to do. One of those features, however, is formatting dates.

Have you ever had an ugly date from your data source formatted like "2019-07-16T20:32:21" and thought, “What’s the most straightforward way to make this not unreadable?”

If you’ve read my previous article on this—How to format dates in Vue 2—you know that I offered up the idea of using a Vue Filter to handle date formats. Well…the folks over in the Vue world didn’t like filters very much and killed them off when developing Vue 3. So, we’ll have to find another way of handling this now.

Luckily, there is an approach that we can take that will still give us most of what we want, using mixins, methods, and computed properties.

A Simple Date Formatter for Vue 3

#

First, specify a new Mixin in your code that will take a date string (preferably ISO formatted for maximum compatibility) and returns the date in the standard locale format as specified by Intl.DateTimeFormat:

export default {
    methods: {
        formatDate(dateString) {
            const date = new Date(dateString);
                // Then specify how you want your dates to be formatted
            return new Intl.DateTimeFormat('default', {dateStyle: 'long'}).format(date);
        }
    }
}

Then you can include that mixin in your component and either use it in a computed property or use it right in your template:

<template>
    <div>
      <p>
        {{ formattedDate }}
      </p>
      <p>
        {{ formatDate('2021-09-01T00:00:00-0400') }}
      </p>
    </div>
</template>
<script>
    import formatDateMixin from '../mixins/formatDateMixin.js';

    export default {
        data() {
            return {
                date: '2021-03-24T15:54:32-0400'
            }
        },
        mixins: [formatDateMixin],
        computed: {
            formattedDate() {
                return this.formatDate(this.date);
            }
        }

    }
</script>

More Power!

#

Need something a little more powerful? Including Day.js¹ will give us what we need to format dates however we want. You can install it into your project with npm install dayjs.

Now, we can make our mixin into something like this:

import dayjs from 'dayjs';

export default {
    methods: {
        formatDate(dateString) {
            const date = dayjs(dateString);
                // Then specify how you want your dates to be formatted
            return date.format('dddd MMMM D, YYYY');
        }
    }
}

Use it the same way you used the other one.

Day.js has a lot of formatting options to choose from and can even do time from now type dates with an extra plugin.

So while Vue 3 got rid of filters, there are still easy ways to include date formatting in your application.

Check out this post’s code in this Repl