Installing and setting up DayJS with Vue

7 views
Installing and setting up DayJS with Vue

In my search for a substitute for MomentJS, which has been declared obsolete with no likely replacement, I came across particularly the ultralightweight DayJS. DayJS does not seem to be as feature-rich, but it tends to be much simpler, easier for installation, as well as usage. To connect DayJS to Vue, I will be using a particular wrapper installation kit.

Installing and setting up DayJS with Vue

To begin, install vue-dayjs from specifically the command line as normal.

Once installed, you would want to create a DayJS instance onto your Vue object. I have been just using Laravel as the overall project approach, but anything similar could fit with your Vue project.

A lightweight wrapper for combining dayjs with Vuejs.

Dayjs is indeed a lightweight (Fast 2kB) JavaScript library for modern browsers with particularly an API that is mostly consistent with Moment.js. You will know how to actually use Day.js if you have used Moment.js.

Vue-dayjs Fundamentals

Hire VueJS Developer

Also Read: Top Reasons Why Vue.js Is Becoming the Most Trending JS-based Framework in 2021

Allow me to demonstrate. The wrapper comes with some of the default language, filter, as well as directive settings that are mentioned in the configuration documentation and that I have used (except for the language)

  • lang

This is specifically the language which is used for showing dates as well as times; by default, it is configured to cn (Chinese). The term definitions for different JavaScript date descriptions are available if you access the vue-dayjs/index.js file from somehow the node module.

  • filters ago seems to be the program’s default (and therefore only defined) filter. It is fairly straightforward; it takes out a date and then adds ago to particularly the end, for example A few days back
  • instructions

Countdown seems to be the package’s norm, much as filters (it is therefore only directive). Countdown does exactly as it claims it does: it counts down somehow to a certain date and period.

This displays the available time in the days, hours, minutes, as well as seconds, counting down as it goes.

This completes the download and walkthrough of the particular vue-dayjs fundamentals.

This completes the download and walkthrough of the particular vuejs-dayjs fundamentals.

Standard Usage 

DayJS, like MomentJS, could be used in a quite native environment. Simply enter a date into the DayJS constructor.

It returns a date relative value to particularly an optionally specified date, but it corresponds to the current date. The following are some examples of performance from the diffForHumans method:

– About 5 minutes ago

– A week ago

– The Same Year

instead of:

2019-05-19 18:08:40

2019-05-12 18:13:40

2018-05-19 18:13:40

Installing and setting up DayJS with Vue

Also Read : Best Vuejs Development Company 2021

Using the particular fromNow function in the Moment.js, we will do the actual same thing. Given that Day.js and Moment.js are expected to have the very same API, I thought that the fromNow approach will “just function.”

It turned out that it didn’t. However, with a few minor modifications to our code, we could get the very same fromNow approach to function with Day.js.

“relativeTime” is a Day.js module for dealing with relative hours. If you used yarn or otherwise npm to install day Javascript, you could simply import the particular relativetime plugin, extend Day.js, and start using the latest fromNow form!

Thanks for reading our post “Installing and setting up DayJS with Vue”, please connect with us for any further inquiry. We are Next Big Technology, a leading web & Mobile Application Development Company. We build high-quality applications to full fill all your business needs.



    Next Big Technology