Reusable Form Input Components With Vue 3

[@hafizjavaid]

Really helpful as always. Please create the fully functional project using vue 3 set-up api, vuex / pinia and typescript

[@_the_one_1]

Pro tip: if you use `type: [Boolean, String]` for the label prop you don't need to specify `default: false` because that would be set by default

[@Tarabass]

I think the whole boolean isn't necessary, just make the string not required. An empty string is falsy..

[@martinpenev6750]

This video just cleared a confusion I had for quite some time! Thx for the superb explanation 👏🏻

[@JohnKomarnicki]

Glad it was helpful!

[@Al-Misanthropic-Bundy]

These damn bots commenting on every video now. Thanks a lot for the video! I love Vue3 and you always slow us nice and easy stuff about it!

[@JohnKomarnicki]

Yeah, lol. I’ve seen these a lot recently 😂 thanks glad you’re enjoying and finding them valuable!

[@owhut5439]

Great content, hope to see a nuxt 3 tutorial soon

[@JohnKomarnicki]

Yes, I’ll be creating some content with nuxt soon!

[@tanzimibthesam5861]

What to do if i want to make whole form resuable?

[@ReturnMeVoid]

what about passing v-model.lazy.number???

[@Ikkin267]

Hello is this also applicable for ionic vue project? Thank you

[@CsabaKissColorado]

You could make it even simpler by using the useVModel function from the VueUse library

[@JohnKomarnicki]

Yeah, I wanted to show how to do this without that, to understand how it worked under the hood. But vueUse is definitely a viable option!

[@DanielTames]

Thanks for the video John! I have a question, the $attrs key binded can be used for any other html tag? Is there another using for this key?

[@JohnKomarnicki]

$attrs holds all the attribute values pass from the parent for you to access within the template itself. You can use it on any element you want to inherit the attributes on

[@DanielTames]

@@JohnKomarnicki Awesome!! Thank you Also, idk why I can’t use defineEmmits or defineProps() without importing them, the editor shows an error, or I’m not sure if it’s a vetur or volar error

[@Al-Misanthropic-Bundy]

@@DanielTamesMake sure you are using

[@NeGovoriNet]

Thank you. Will you tell us about how to validate these components?

[@JohnKomarnicki]

I’m going to create a follow up video for validation on forms!

[@kookoo6128]

very good useful tutorial, about a very specific thing.

[@dimjohn5878]

when i import the Modal to my parent component, the child component is shown in the script (Modal gets green) and not in the template (Modal is shown as plain text ). As a result i cant reuse the child component. Can someone help me plz

[@pixiedev]

Thanks this is what I need.

[@JohnKomarnicki]

Glad to hear!

[@RianY2K]

Thank you for video, this is useful

[@JohnKomarnicki]

I’m glad to hear!

[@manjirisonar4490]

Thanks for this tutorial. Its helpful but Getting following error. Can you please help me here? => E:\...\customelement\src\components\BaseInput.vue 14:3 error 'defineProps' is not defined no-undef ✖ 1 problem (1 error, 0 warnings)

[@manamimnm]

try importing defineProps from vue

[@karthikm.1804]

Tutorial on Product feedback app with vue

[@ravibhati9270]

Would be great if you can share, how the same BaseInput can be used with other types like (number, email, password, etc)

[@guillermomazzari4983]

Great vid, but it be way better using pinia, just a comment