Useful Vue Time Components That’ll Save You Time

John Au-Yeung
May 11, 2020 · 4 min read
Photo by Veri Ivanova on Unsplash

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at some Vue time components that’ll save you time from creating them from scratch.

vue-timeago

The vue-timeago component is great for letting us display the time span from the current time and the time that we’re given.

We can install it by running:

Then we can use it as follows:

main.js :

App.vue :

In main.js , we registered the timeago component globally with various locales and the component’s name.

Then we included it by setting the datetime to get the time span from the current in the locale set as the value of the locale option in main.js . In the 3rd instance, we set the locale to zh-CN , which is another locale that we set in the locales option as alternative locales.

vue-countdown

A useful component for displaying the countdown time given then the time span that we pass in.

We can install it by running:

Then we can use it as follows:

main.js :

App.vue :

In the code above, we passed in the time prop value as a number. Then we can get the days, hours, minutes, and seconds from computed from the countdown from slot props and display it in our App component.

Other props in auto-start , which is boolean to indicate whether we want to start countdown automatically when initialized.

emit-events indicates whether we want to emit events. It’s a boolean prop

interval is a number prop to indicate the interval in milliseconds of countdown progress. It must be 0 or larger.

now is a function to generate the current time in milliseconds in a specified time zone.

tag is the element where the countdown timer resides. It’s a string.

transform takes a function to transform the output props before render.

Photo by Badhon Ebrahim on Unsplash

vue-moment-lib

This is a Vue library that provides us with the various date and time filters to display date and time our way.

It needs moment.js to work, so we install it by running:

Then we can use it as follows:

main.js :

App.vue :

The code above imports the library into our app, and then we can use the moment methods to format the date as we wish.

The first example transforms the date to a moment object and then formats it to display the year only.

The second takes the string and then transforms it to the year with moment. time is an alias for moment .

The 3rd example takes a UNIX timestamp and then returns the UTC date-time and displays it.

Then we should see:

displayed on the screen.

As we can see, it took little to display dates as we want to. We can also use it in our component code.

For instance, we can use it as follows:

App.vue :

The code access the vue-moment methods from this since we imported it in main.js as we did in the previous example. Then we call the methods as we did with the template filters.

Then we should see:

displayed on the screen.

Conclusion

There’re many date-time manipulation libraries to help us display and manipulate time the way we wish to. They’re all very configurable so we can use them to display dates and time spans without calculating them ourselves.

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store