Type Safe Custom Directives (Advent of Vue #16)

My solution to the 16th Advent of Vue challenge! Pretty quick one, and something that doesn't get as much attention as it probably deserves - custom directives.
🎄 Advent of Vue: adventofvue.com/
💻 Code: github.com/lmi...
🐦 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... (YT_5_OFF for $5 off)
👉 (Course) Vue.js: The Composition API: www.udemy.com/...
🖖 (Course) Complete Vue.js 3: www.udemy.com/...

[@DannyFeliz]

I'm loving this serie

[@LachlanMiller]

Thanks Danny 😎
Are you working on anything interesting lately??

[@shareefhassan8197]

this is very helpful if you are making something generic that could apply to many components like a ripple effect or a loading overlay,
i'm learning alot form your videos thanks

[@LachlanMiller]

Exactly, I think more people should be building UI libs on top of headless components. headlessui.com is a good step in the right direction, as is reach.tech.

[@VELIXYZ]

Thank you!

[@LachlanMiller]

Thanks! I appreciate your comment!

[@michaelm8044]

Very useful stuff, thanks for yet again another great video.

[@LachlanMiller]

Thanks Michael! The comments do a huge amount for my motivation, I appreciate your kind words.

[@0l4GuD]

You're dope . Keep it up, thank you

[@LachlanMiller]

Thanks, I will keep it up 😎

[@bendevine]

Great video! If you do make a follow-up with tests I'd love to see you handle the case where an element has both a class attribute and a classList-modifying directive. Is there a safe way to merge the two? By default, the class attribute will blow-away the classList changes that were applied during the `created` hook

[@LachlanMiller]

I had no idea that classList change would blow away the other classes. That's not at all what I would have expected. Let me think about this a bit more.