Advent Of Vue 2022

If you didn't get here from an email, read this section! Skip it otherwise.

Advent Of Vue is a series of 24 Vue coding challenges that are sent out every day from December 1 to December 24 via a dedicated newsletter. If you'd like to receive more of these puzzles in the future, go ahead and sign up!

Problem description

Christmas is coming soon! But how soon? 🤔 Wouldn't it be nice to know exactly how many days, hours, minutes, and seconds are left until that magical day? In this challenge, you'll create a countdown to tell you exactly that.

Use the useNow composable from VueUse (preinstalled) to get a reactive version of the current time and then do the math to get days, hours, minutes, and seconds until Christmas.

If you're up for a bonus challenge use the Vue transition component to transition smoothly between each countdown number! 🚀

Example of a solution in action

https://papaya-caramel-13dd76.netlify.app/

Author

This challenge was created by Daniel Kelly, lead instructor at Vue School.

Learn more about VueUse from our premium video course: VueUse for Everyone! Plus learn other hot Vue technologies like Pinia, Vitest, TypeScript, Nuxt 3, and more!

Credits