Working with Attributes in Vue

RESOURCES

Get early access to videos, exclusive content, interactive code challenges, and more.

follow me on twitter:

MUSIC
#vuejs #vue #javascript #webdev

[FullStackJack]

Your channel is one of the few coding channels I watch on normal speed instead of x2. Great Video as always! 🥳

[lightning]

There's just something about your videos that makes them so entertaining to watch. you'd be a good teacher!

[RodrigoDAgostino]

I really missed you videos, man! It's nice to see you back :)

[slava_trushkin]

Passed attributes were a nightmare to work with in Vue 2. Attributes and events were separate, styles could be string/array/object, so mixing passed styles and custom styles was not fun. Glad it was redesigned in Vue 3. It is now clean and easy to work with.

[patrickraedler]

Your Vue content is good! Thanks for sharing really cool stuff :)

[tsuyoshi]

I knew how $attrs works, but I didn't know the attribute validation technique. That's neat.

[redemptionokoro]

Hey. Been a while since you posted a video. Good to see you okay

[coding-in]

Is good if we put api call in pinia method?

[erosburastero]

Thank you for this video, i have a question, what if i have for example this code:
<div>
<v-btn v-bind="$attrs"><v-btn>
<v-input v-bind="$attrs"></ v-input>
</div>

Taking into account that in this example i'm using an ui framework, and tags has props which the name is the same in both.
When i use that component and i try to name a give for example "color" both has that prop and it just read that in one.
There is a solution for this? i'm currently using v-deep in this cases but i think this is not the best option, thank you!

[vmaxxk]

Good example/use cases in a video. 

I would avoid using v-bind=$attrs with more complex embedded component usage as it becomes a code smell for medium/large projects, and breaks IDE/typescript experience and validation (typescript does not validate at runtime). Rule I'm starting to formulate for larger projects: If you use a custom component or an abstraction via component is, avoid v-bind=$attrs and leverage prop contracts via composable prop functions and v-bind=$props

Example defineComponent({props: {....useSharedProps()}, setup(props) => return h(CustomComponent, {...props})}).

Do this especially if you are developing something other devs will help maintain. They will appreciate their IDE helping them with what props are available on the component they are trying to use. Your future self will appreciate it as well 😁.

[iUmerFarooq]

But I have a Question,
1. Is that possible to use multiple script tags? How and Why?
2. What if I use options API in one script and composition API in another?

[iUmerFarooq]

Hahaha very well explanation. I was confused about it.

[BauldyBoys]

Amazing, my input components are all wrapped by the label so fall through is not an option it's such a pain. I am basically redefining all of the input attr's as props to send them to the input inside the label. This will make my life much easier.

[jez]

Attributes should always be manually bound if they're being used. Relying on the fallthrough behaviour is a bad idea because if you switch your root component to being a wrapper you'll suddenly lose the fallthrough attributes on the template element you want them applied to.

[SLRModShop]

Started coding last year, learned JS and then Vue and immediately fell in love with it. 350 days later I got my first job as a Vue dev. Somehow, they think I'm gifted and now I'm supposedly full stack, working on Rails, currently writing slim files and deeply missing Vue 😓Life is unfair. I want to code in Vue 😭

[ДенисКуликов-мо]

жаль что jsx работает медленнее во Vue 3

[codestuff]

Another cool video. Did not know about this one either v-bind=$attrs is amazing to get out of emit event hell