A Vue.js Clock

The Inspiration

Earlier this year I took the Building Applications with Vue & Nuxt course on Frontend Masters with Sarah Drasner. It was a great course, with some really interesting projects and very helpful tips along the way. I feel like I came away with a pretty good idea of how to structure a Vue app, in varying level of complexity. One of the beginner projects was a little game with Greensock animations, and this inspired me to try out something on my own with Vue and Greensock.

How It Works

Basically when the component loads in VUe, we start a setInterval function that creates a new date object and within that function we update the state that controls each hand of the clock. The state is watched and updates a Greensock rotation value each time it changes. The hardest part was figuring out the math for the hour hand, which to be honest I just found on a math forum.

You can check it out for yourself below:

See the Pen Simple Vue.js Clock by Zack Shave (@zackshave) on CodePen.