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

day js library in nuxt
Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

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

day js library in nuxt

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.


Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
  • 1
    Share

About Anisur Rahman Shahin

Hello. My name is Shahin. I'm a tech enthusiast guy. Personally, I’m Optimistic and always in hurry kinda person. I'm a freelance web developer. I am working at Zakir Soft as Laravel Developer. My Portfolio website: https://devshahin.com/

View all posts by Anisur Rahman Shahin →

Leave a Reply

Your email address will not be published. Required fields are marked *