A Better Way To Handle Vue Props?

🤖 WebDevDaily: www.webdevdaily.io
📕 Nuxt 3 Course: www.learnnuxt.dev/
📕 Vue 3 Crash Course: johnkomarnicki.gumroad.com/l/...
🚀 Join the channel : / @johnkomarnicki
🤖 Website: johnkomarnicki.com/
🐦 Twitter: / john_komarnicki
#vue #vue3 #nuxt #nuxt3

[@julisch94]

I personally don't like to use the ["field"] accessor because it feels error-prone. What if I spell field wrong?

[@brendonvz]

Great simple video!

[@karlstenator]

Great video, thanks for sharing.

[@JohnKomarnicki]

Thanks for watching!

[@cindysi63]

Nice tip. Thanks

[@russianstan]

What about inheriting attributes in child component with this approach?

[@alimaher1]

Nice video, but I'm not sure if this idea scales well with bigger objects with many props and some nested objects.

[@JohnKomarnicki]

Hey, thanks for the comment.
First, i don't see an issue with nested objects. It would work the same, it would just be an object within the component.
Secondly, if your component has many props, even though it would require a bit more code to define all these props, to me it would still be a good idea. This way you know what exactly is being used within the component. Looking at a big single object as a prop to me is very granular.
But it's all preference at the end of the day. There really is no wrong way

[@aqordeon]

this video develop my Vue skill. thanks.

[@hinogi]

So, what about if you have two objects? I guess you can't use multiple v-binds but how would you handle that scenario?

[@joshuaberrios]

Gained a subscriber out of me.
This was great. Never thought of doing this. Going to try to implement this next week at my job.

[@JohnKomarnicki]

Awesome! Be sure to let me know how that goes!

[@pavelino17]

Nice video, does this also work with passing additional props that are not in the User object? say any additional text. Can i then go v-bind="User" :text="myText" and just add the text prop to the defiineProps?

[@JohnKomarnicki]

Yeah, I believe that should work.
You’d just have to ensure you don’t pass a prop name already being declared in that object otherwise you might encounter some issues.

[@pavelino17]

@@JohnKomarnicki cool thanks, I'll try it out

[@nguyennguyen6924]

this is more likely a personal taste , there is no bad side passing an object via props so we dont have to define so many props inside child component , this takes less time . but I agree with you at readability point .

[@JohnKomarnicki]

Yeah, as I mentioned, the other ways I showed we’re not wrong. Just a preference at the end of the day

[@Stefano-eo]

If you destruscture the props, are you not losing the ref?

[@JohnKomarnicki]

No, you would not!

[@RomanDawydkin]

An interesting but controversial approach. What if we need to add another property later?

[@JohnKomarnicki]

You would just add it as a prop in the component. Would be very simple to do

[@yoanestradablanco1608]

Good video

[@JohnKomarnicki]

Thank you! 🙌

[@Saeid-Za]

Why not use the whole User as a root prop for the child?
Somthing like "defineProps()" and if I want to only use some fields of User (not the whole User) using built-in Pick or Omit would be helpful. In this scenario calling and passing the Component and the Component code would be as minimal as possible

[@JohnKomarnicki]

I think this would work? However, as i mentioned the other ways i showed were not wrong. This approach i showed is just another way of handling it. At the end of the day it's all up to preference and what you prefer!

[@cant_sleeeep]

dude, just go with the defineprops macro

[@MightyArts]

Why don't you just define the User type within the UserCard component itself, instead of defining it somewhere else, and then importing it here? Collocate the types, it will achieve the same readability that you're looking for here.

[@JohnKomarnicki]

Typically you'd have this object defined in the parent component, so it would need to be typed there. So creating an external type does make sense in this case. Yes, the types in the file would show what exactly the object is, but to me it's just not very clear. This approach i showed is just another way of handling it. At the end of the day it's all up to preference and what you prefer!

[@ForexLearnerAI]

I don't like this approach. Why would you do that?

[@JohnKomarnicki]

Readability.
There’s no right or wrong way to do this. It’s mainly about preference, and what you prefer

[@srdnlmrn]

but the title says the better way 😂😂😂

[@JohnKomarnicki]

It’s a question title

[@Kingside88]

Very opinionated. To be hones I liked the first approach the most. Just :user="user" .

[@user-of6ls2ng5l]

Questionable approach, brother.

[@JohnKomarnicki]

What’s questionable?

[@user-of6ls2ng5l]

@@JohnKomarnicki If I want to add/remove keys in User, I will have to specify them in the component