Sean Kerwin
Posted on February 23, 2021
This is a relatively short guide, and it's just to show how easy it is to implement day.js inside a Nuxt app.
I've always just used Moment.js for date formatting, but since Moment.js has now been abandoned and they're encouraging people to use alternatives, I needed to find a way to convert timestamps that are provided by the API's I consume. They usually return timestamps in the following format:
2020-10-08T07:51:58Z
Which to be honest, isn't really useful to anyone. That's where day.js comes in, it can convert the timestamp above into something like
Oct 8th 2020
It's pretty simple to do.
First we need to pull in the @nuxtjs/dayjs
package with the following command.
yarn add @nuxtjs/dayjs
or
npm install @nuxtjs/dayjs
Once that is installed, open up your nuxt.config.js
and add
'@nuxtjs/dayjs'
to the modules
section, and then outside of that, add the following dayjs
object.
modules: [
'@nuxtjs/dayjs',
...
],
dayjs: {
locales: ['en'],
defaultLocale: 'en',
plugins: ['relativeTime', 'advancedFormat'],
},
Set any locales you want, for me, being in the United Kingdom, I set my locale to en
and then add any additional dayjs plugins you need. I'm using the RelativeTime and AdvancedFormat plugins.
Once everything is installed, you from within any component you can do the following
{{ $dayjs('2020-10-08T07:51:58Z').format('MMM Do YYYY') }}
Which will output this
Oct 8th 2020
You can also use the RelativeTime plugin to turn it into this:
{{ $dayjs('2020-10-08T07:51:58Z').fromNow() }}
Which will return
a year ago
You can obviously, not use hard-coded dates and use props/variables such as
{{ $dayjs(post.published_at).fromNow() }}
Day.js is a simple and ultra-lightweight replacement for Moment.js and is super easy to use.
Posted on February 23, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.