In my search for a substitute for MomentJS, which has been declared obsolete with no likely replacement, I came across particularly the ultralightweight days. a day 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-days 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 days with Vuejs.
Days 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
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)
Also Read: Top Reasons Why Vue.js Is Becoming the Most Trending JS-based Framework in 2021
- lang
This is specifically the language that 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
A countdown seems to be the package’s norm, much as filters (it is, therefore, the 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 venue-days fundamentals.
This completes the download and walkthrough of the particular vuejs-days fundamentals.
Standard Usage
days, 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
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.
“relative time” 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 relative time 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.
