How to add Day.Js Library in Nuxt.Js Project with Example

Day js library in nuxt. How are you doing? In this tutorial, I will show you How to add Day.Js Library to your Nuxt.Js Project. Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment. js-compatible API.

How to add Day.Js Library in Nuxt.Js Project with Example

In this day js tutorial, I will show you everything from starch. So let’s start. Create a fresh Nuxt Project, run this command.

Create a nuxt project using CLI

yarn create nuxt-app test

Well, I have created a fresh NUXT project, which name tests (you can give any name whatever you want). So well now you have to install the day js library in your project. Run this command in your terminal.

yarn add @nuxtjs/dayjs # or npm install

Well, now you have to register dayjs module to your Nuxt Application. Go to nuxt.config.js file. Inside the modules, the array adds this code and add also dayjs configurations object.

nuxt.config.js

  modules: [
    '@nuxtjs/dayjs'
  ],
  dayjs: {
    locales: ['en'],
    defaultLocale: 'en',
    defaultTimeZone: 'Dhaka/Bangladesh',
    plugins: [
      'utc', // import 'dayjs/plugin/utc'
      'timezone' // import 'dayjs/plugin/timezone'
    ] // Your Day.js plugin
  },

Well, Our All setup has been done. Now make a method in your methods hook.

 methods: {
    formatTime (time, format = 'DD MMM YYYY , hh:mm A') {
      return this.$dayjs(time).format(format)
    }
} 

Well, our method has been defined. Now time to check it. Note: You can add this method in the mixins file so that you can access this method any component whatever you want.

Read More : How to use Mixins in Nuxt.JS with Example

{{ formatTime(your_model.created_at) }}
{{ $dayjs('2021-10-08T07:51:58Z').format('MMM Do YYYY') }}
//output : Oct 8th 2021

Hope it will help you.