Reusable Form Components with Vue 3

Harness the power of Vue 3 to create simpler and more powerful reusable form components. This video is an introduction to our full course on Vue 3 Forms available here 👉 www.vuemastery.com/courses/vu...
Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan You (the creator of Vue), Vue Mastery is the ultimate learning resource for Vue developers to level-up their skills. Watch more free Vuejs tutorials 👉 www.vuemastery.com/courses
Get in touch 👉 [e-mail]
Lesson Resources:
Starting code: github.com/Code-Pop/Vue-3-For...
Ending code: github.com/Code-Pop/Vue-3-For...
Jump to:
0:00 Course Overview
2:29 Our Demo Form
3:44 The BaseInput
6:45 v-model: Binding to the value
7:55 v-model: Emitting the update:modelValue event
11:56 Assigning the $attrs to the input
13:34 Wrapping up

[@EduardoSerena]

I love that you speak very clearly so i can understand everything you say in the right way!!! (i speak spanish xD)

[@VueMastery]

Ready to become a better Vue developer in 2022? To help you meet your goals, we are offering a full year of access to our premium courses for the cost of less than 6 months. 👉buff.ly/32c0Kwh

[@IamPali2024]

This is amazing. I think Vue will soon become the most popular framework :)

[@KadduLivingstone]

This is a clear explanation thanks so much

[@abdulhameed-vo7jq]

Awesome work, Thanks!

[@codewithfongoh]

Thank youuuuuuu, this just saved me thousands of lines.

[@lorenzneumann7157]

Exactly what I was looking for

[@sahanabellad9974]

Thank you for this awesome tutorial. Can you please tell me how to apply the same concept for drop-down list in the form?

[@hiroyukinumaguchi1984]

Great content! Thank you!

[@nazeefpeerzade6378]

thanks for explaining :)

[@rimuru2483]

Great explanation

[@chris_ea]

awesome pedagogy

[@TerjeNesthus]

Thanks for this

[@caiovinicius7871]

Very Nice!

[@aleksas_codebook]

Gotta love Vue. :)

[@aangGAD]

very nice!

[@okanyldrmop]

Which theme is used in editor? Btw, thank you for this video.

[@tianqing9363]

I'm curious what software do you use to animate things in your videos?

[@zaviusfirerave]

What's a good way to generate a dynamic id for the input tag so that the label can have a for attribute too?

[@alaminhossain6510]

Great ❤️

[@masudparbhez458]

Amazing

[@kamertonaudiophileplayer847]

A reusabilty is an amazing feature of Vue. I think you are near to switch to low code technology, when you do not need to code at all, you can just tell - I want a drop down form element with: label,list of items and so on. It will be extra cool.

[@SethSetiadha]

would you please make video for more advance form and recommended component/plugin, let's say like datepicker, autocomplete dropdown both single and multiple selectable values, file upload, etc...and same example might need back-end, but i think it would be great video

[@VueMastery]

This is a great idea!

[@user-cj7lq3ug3w]

How do create a Reusable Form Components with Vue 3 for textarea

[@marcelo.caetano]

Radiogroup component ?

[@boolloop]

sensetional

[@clustersnake]

Oh! I love Vue! ... pun intended

[@apnagamer61]

Ufff

[@CarlosWolfram]

Creas un componente reutilizable para el proyecto.
... Nadie lo usa y terminan haciendo desde cero lo mismo que hace el componente >:u

[@ColinRichardson]

My Typescript cries..

[@joshgladstone5831]

why do you use $emit.target.value instead of just the modelValue prop you set up bound to :value?

[@toddhammer9228]

This. I have been testing atomic components for things like she is building here and it seems that Vue automatically emits the modelValue without having to define the emit. Vue emits the changes for you.