Uploaded December 2022 | Updated September 2026, 1 week ago
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-patterns-for-vuejs
👉 Link to algorithm movable-type.co.uk/scripts/latlong.html
👉 Haversine formula en.wikipedia.org/wiki/Haversine_formula
🎄 Advent of Vue: adventofvue.com
💻 Code: github.com/lmiller1990/aov2022/tree/renderless
🐦 Keep up with me on Twitter! twitter.com/Lachlan19900
If you like my teaching style, I have a book and two courses!
👀 (Book) Design Patterns for Vue.js: lachlan-miller.me/design-patterns-for-vuejs (YT_5_OFF for $5 off)
👉 (Course) Vue.js: The Composition API: udemy.com/course/vuejs-3-the-composition-api/?referralCode=0C911BD2BD6C57007F36
🖖 (Course) Complete Vue.js 3: udemy.com/course/complete-vuejs-3-crash-course-composition-api-vue-router-vuex/?referralCode=765A6E679914BF6E60AF
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-patterns-for-vuejs
👉 Link to algorithm movable-type.co.uk/scripts/latlong.html
👉 Haversine formula en.wikipedia.org/wiki/Haversine_formula
🎄 Advent of Vue: adventofvue.com
💻 Code: github.com/lmiller1990/aov2022/tree/renderless
🐦 Keep up with me on Twitter! twitter.com/Lachlan19900
If you like my teaching style, I have a book and two courses!
👀 (Book) Design Patterns for Vue.js: lachlan-miller.me/design-patterns-for-vuejs (YT_5_OFF for $5 off)
👉 (Course) Vue.js: The Composition API: udemy.com/course/vuejs-3-the-composition-api/?referralCode=0C911BD2BD6C57007F36
🖖 (Course) Complete Vue.js 3: udemy.com/course/complete-vuejs-3-crash-course-composition-api-vue-router-vuex/?referralCode=765A6E679914BF6E60AF
![Extending and Improving the Renderer [Vue 3 Custom Renderers 7/7]](https://i.ytimg.com/vi/J4z16SR2PI0/mqdefault.jpg "Extending and Improving the Renderer [Vue 3 Custom Renderers 7/7]
▶️ Full playlist: https://www.youtube.com/playlist?list=PLC2LZCNWKL9b876nPMVULEyBzkVoH8B7n
⌨️ Source code: https://github.com/lmiller1990/vue-pdf-renderer-demo
📗 $5 off my Design Patterns for Vue.js with YT_5_OFF: https://lachlan-miller.me/design-patterns-for-vuejs
🔨 Course on Composition API, TypeScript and Testing: https://www.udemy.com/course/vuejs-3-the-composition-api/?referralCode=0C911BD2BD6C57007F36
🎥 Complete Vue.js (Options/Composition, Vuex, Router): https://www.udemy.com/course/complete-vuejs-3-crash-course-composition-api-vue-router-vuex/?referralCode=765A6E679914BF6E60AF
🐦 Twitter: https://twitter.com/Lachlan19900")
![Firing Events and `waitFor` - [Vue Testing Library 4/8]](https://i.ytimg.com/vi/JEHkTcZyL6o/mqdefault.jpg "Firing Events and `waitFor` - [Vue Testing Library 4/8]
▶️ Full playlist: https://www.youtube.com/playlist?list=PLC2LZCNWKL9YdD4Z4V6guveajQoKN8rui
📗 $5 off my Design Patterns for Vue.js with YT_5_OFF: https://lachlan-miller.me/design-patterns-for-vuejs
🔨 Course on Composition API, TypeScript and Testing: https://www.udemy.com/course/vuejs-3-the-composition-api/?referralCode=0C911BD2BD6C57007F36
🎥 Complete Vue.js (Options/Composition, Vuex, Router): https://www.udemy.com/course/complete-vuejs-3-crash-course-composition-api-vue-router-vuex/?referralCode=765A6E679914BF6E60AF")
![[Functional Core, Imperative Shell] Functional Core, Imperative React?! (8/8)](https://i.ytimg.com/vi/JbUOqjyOeIE/mqdefault.jpg "[Functional Core, Imperative Shell] Functional Core, Imperative React?! (8/8)
▶️ Full playlist: https://www.youtube.com/playlist?list=PLC2LZCNWKL9a7b7Ufx0ngo9xH_b8j9ZlA
📗 Sign up for my book, Vue design patterns: https://lachlan-miller.me/design-patterns-for-vuejs
⭕️ Original playlist building the Tic Tac Toe game: https://www.youtube.com/playlist?list=PLC2LZCNWKL9bxH1aVRVKoaq6Y2KKX6J5g
🔨 Course on Composition API, TypeScript and Testing: https://www.udemy.com/course/vuejs-3-the-composition-api/?referralCode=0C911BD2BD6C57007F36
🎥 Complete Vue.js (Options/Composition, Vuex, Router): https://www.udemy.com/course/complete-vuejs-3-crash-course-composition-api-vue-router-vuex/?referralCode=765A6E679914BF6E60AF
I first learned about this idea a long time ago in Gary Bernhardts excellent screencast. See it here https://www.destroyallsoftware.com/screencasts/catalog/functional-core-imperative-shell. It took me a long time to really get this paradigm and understand why its good. I do my best to explain it here using my chosen medium, JavaScript and Vue.js.")
![[Testable Forms] 1.2 Concise Tests with test.each](https://i.ytimg.com/vi/JsrpYDuC7_8/mqdefault.jpg "[Testable Forms] 1.2 Concise Tests with test.each
Source code and blog post: https://lachlan-miller.me/articles/writing-testable-forms
My courses and advanced screencasts: https://vuejs-course.com/
My website (sign-up for my book on Vue testing!) https://lachlan-miller.me/")
![Avoiding Stale Rendering - [Render Functions 7/7]](https://i.ytimg.com/vi/K2YpDNapDQM/mqdefault.jpg "Avoiding Stale Rendering - [Render Functions 7/7]
▶️ Full playlist: https://www.youtube.com/playlist?list=PLC2LZCNWKL9bt5t7n6rAPy1Yni-VIGJMc
📗 $5 off my Design Patterns for Vue.js with YT_5_OFF: https://lachlan-miller.me/design-patterns-for-vuejs
🔨 Course on Composition API, TypeScript and Testing: https://www.udemy.com/course/vuejs-3-the-composition-api/?referralCode=0C911BD2BD6C57007F36
🎥 Complete Vue.js (Options/Composition, Vuex, Router): https://www.udemy.com/course/complete-vuejs-3-crash-course-composition-api-vue-router-vuex/?referralCode=765A6E679914BF6E60AF")
![[Vue.js 3 Crash Course] 1.10: Your First Component](https://i.ytimg.com/vi/KCWu3SAXaAs/mqdefault.jpg "[Vue.js 3 Crash Course] 1.10: Your First Component
WATCH THE UPDATED PLAYLIST HERE, ITS WAY BETTER https://youtube.com/playlist?list=PLC2LZCNWKL9bICnF4PdWlLEkRH00Qv6mx
Hi! 👋 This is the first module of my entirely re-recorded Complete Vue.js 3 course.
🎥 I re-record it once a year, to keep it up to date, make improvements, etc!
🎉 Full course includes Options + Composition APIs, Vuex and Vue Router (4.5 hours, 85 lectures).
📝 4 fundamental modules (Options, Composition, Vuex, Vue Router)
🧑💻 4 projects (Form Validation, Pokemon Cards, Microblog, Photo Album)
😇 If you enjoy my teaching style, you can buy the full course!
👉 BUY ON GUMROAD $10 OFF WITH YOUTUBE_10: https://gumroad.com/l/complete-vuejs
👉 BUY ON UDEMY: https://www.udemy.com/course/complete-vuejs-3-crash-course-composition-api-vue-router-vuex/?referralCode=765A6E679914BF6E60AF
I hope you find the content useful! 👊 Happy coding ⚡️
Learn more: https://vuejs-course.com/complete-vuejs")
![[Testable Forms] 1.8 Inputs, v-model and the number modifier](https://i.ytimg.com/vi/Kq0_AIfXNvk/mqdefault.jpg "[Testable Forms] 1.8 Inputs, v-model and the number modifier
Blog post: https://lachlan-miller.me/articles/writing-testable-forms
My courses and advanced screencasts: https://vuejs-course.com/
My website (sign-up for my book on Vue testing!) https://lachlan-miller.me/
Source code: https://github.com/lmiller1990/forms-demo")
![[Testing Vue 3 apps] 1.10 - Mocking Vue Router with global.mocks](https://i.ytimg.com/vi/KwsIT-Cp6iw/mqdefault.jpg "[Testing Vue 3 apps] 1.10 - Mocking Vue Router with global.mocks
My courses and advanced screencasts: https://vuejs-course.com/
My website (sign-up for my book on Vue testing!) https://lachlan-miller.me/")
