Datetime Filter in Vue 3 using Moment.js

It turns out that Filters have been removed 😏 in Vue 3 Official docs link.

So that practically makes it a bit hard to format date/datetime in Vue 3. According to the official docs, the use of global filters is now encouraged but in my opinion, I'm not too sure the use of global filters would solve the problem at hand.

So, I looked around but couldn't find much examples but I was able to eventually come up with something with the help of this famous library [Moment.js] 🕗 (https://momentjs.com/)

Let's dive straight into it.

1. Install moment js from npm npm install moment --save
2. In your component

import moment from 'moment'
export default {
...
  created: function () {
    this.moment = moment;
  },
  setup() {
   let todaysDate = new Date();
  }
...
}

<div>
   {{ moment(todaysDate).format("ddd MMM DD, YYYY [at] HH:mm a") }}
   <!-- As of the time of writing, this gives ==> Thu May 13, 2021 at 19:42 pm -->
</div>

So that's it 😉. Please feel free to change the format to suit your use case.
Suggestions/comments are welcome. Thanks 🙏 🙏 🙏

Comments

[Allan Neves]

Thank you! If you don't mind the question, why do we need to assign the moment to itself upon creation in the life cycle? Obviously, we cannot use it as a component but I don't understand the black magic behind it.

[Blazej Plis]

Thank you for that!

[Olufemi Oyedepo]

You're most welcome 😎