Vue v-model in child components and defineModel

We look at a few ways to use Vue's v-model in your child components. This includes a manual implementation, using writable computed, using a composable in the VueUse library, and using defineModel which is currently experimental in Vue 3.3.
GitHub Repo: github.com/drehimself/vue-vmo...
RFC link: github.com/vuejs/rfcs/discuss...
LINKS
My courses: codewithdre.com
Sign up for my newsletter: andremadarang.com/newsletter
My website: andremadarang.com
Twitter: / drehimself
GitHub: github.com/drehimself
CodePen: codepen.io/drehimself

[@drehimself]

defineModel is now stable in Vue 3.4: blog.vuejs.org/posts/vue-3-4#definemodel-is-now-stable

[@whatsupbudbud]

Loved your structural approach from least to most abstract.

[@claytonnighthawk7837]

Thank you, this was a really helpful explanation!

[@user-eh6sf2lg6e]

So glad I found this video.
I just started working with Vue after React and this topic was very confusing for me. Especially since the same thing can be done in different ways. Thanks!

[@maxralph01]

Wow !
Been a while, Andre !
Single-handedly, your e-commerce video series made me an intermediate Laravel developer.
Returning to say "Thank you" !

[@ivan4486]

This is so helpful! Thank you so much!

[@N1mdae]

This video was very helpful, thanks

[@isabelphillips451]

Thank you for this 🤗

[@ulugbekatakhanov1431]

the best explanation. Great.

[@oketafred]

Awesome content Andre

[@aissa.bouguern]

Great and informative video as usual!

[@keno571]

Thanks for the great video! Looking forward to more :)

[@devmenezes]

Nice content, Andre.

[@acerhigh09]

defineEmits not needed when using defineModel, are still there in the defineModel example, but perhaps that implicitly meant

[@johnnydriesen7575]

Excellent Vid. Very well explained.
Thanks for willing to share your knowledge, and taking your time to create this vid.
Question to you.. R U a fan of TS ? And if I can ask ... Why (not) ?

[@drehimself]

I've only used TypeScript at a very basic level, I haven't really used it for any major projects. I understand the benefits, and I think you'll only see them if you really decide to go all in. Vue 3.3 has made some considerable improvements to using TS within Vue, so maybe we'll see more Vue devs using it.
Check out this talk by Tanner Linsley (author of popular React libraries) who outlines his journey from non-TS person, to all-in with TS: th-cam.com/video/O4IWJcafX8c/w-d-xo.html. I think this is how most TS users feel.

[@johnnydriesen7575]

@@drehimself Thank you for your reply ! Highly appreciated.

[@codedjango]

Thanks....followed your tutorial n works very well, however, in Vue DevTools, in the child component, it shows:
event-listeners:
update:model-value: not-declared
Is it that Vue devtools is not ready for this "defineModel" macro? Please suggest

[@EduardoDonato82]

Hi, what vscode theme are you using?

[@mikeywork6348]

Does this work if the modelValue is an object that contains arrays?

[@munandisichali605]

Any full courses that will come from you?

[@drehimself]

Possibly in the future, for now, just trying to get some steady content going here on YT.

[@Skia_]

If you try to console log the name ref in the app component, the value will not update in the console when the input value changes.
Can someone explain to me why? I am a React developer
How can i make the name ref update in the script tag?
Thanks in advance

[@whatsupbudbud]

Question is where in the App component lifecycle you're console.logging it. If you did it just in the script tag, that would be similar to doing once on mounted.