Renderless Component & Type Safety (Advent of Vue #17)

My solution to the 17th and final Advent of Vue challenge! Good one to end on - renderless components are a great example of separation of concerns. We also talk about pushing logic out of a component into a stateless function.
I also talk about renderless components in my book: lachlan-miller.me/design-patt...
👉 Link to algorithm www.movable-type.co.uk/scripts...
👉 Haversine formula en.wikipedia.org/wiki/Haversi...
🎄 Advent of Vue: adventofvue.com/
💻 Code: github.com/lmiller1990/aov202...
🐦 Keep up with me on Twitter! / lachlan19900
If you like my teaching style, I have a book and two courses!
👀 (Book) Design Patterns for Vue.js: lachlan-miller.me/design-patt... (YT_5_OFF for $5 off)
👉 (Course) Vue.js: The Composition API: www.udemy.com/course/vuejs-3-...
🖖 (Course) Complete Vue.js 3: www.udemy.com/course/complete...

[@prashlovessamosa]

Your Vue testing playlist is awesome i learn a lot thank you.

[@michaelm8044]

I really enjoyed the refactor you did putting it all in one file. Thanks again for another great video. Super easy to follow and comprehensive as usual!

[@LachlanMiller]

Thanks! The real solution would be to stop using imperial units, but that's a refactor that will take several centuries, so the best we can do for now is abstract it away into a function 🙃

[@michaelm8044]

@@LachlanMiller Lol true that

[@huslerbling]

I’m at bit confused as to why you opted for a headless component instead of a hook. The component you created does nothing but render whatever children it receives. It contains no other markup or styles. I seem to be missing the point here 🤔