Learning to be a better Vue developer isn't always about the big concepts that take time and effort to master.
It's also about the short tips and ...
For further actions, you may consider blocking this person and/or reporting abuse
One of your code samples isn't quite correct for tip #15. You've got:
Where it should be:
That tip is solid advice btw, I'm still discovering how to do all these things in a Vue.js world and apply all my React based knowledge in a useful way :-)
Re. tip #15, have you considered creating a file with prop types in it? This is something I've done in previous projects, particularly useful if you have the same/similar complex types used in multiple places. You could for example make the icon it's own prop type so that rather than passing down many attributes, you pass down a single object as an attribute:
e.g.
prop-types.js:
Icon.vue script:
Example usage:
The icon can then be used as
<Icon v-bind="icon" />
Thanks for pointing this out! Fixed it in the article.
I haven't thought of using a separate file, but I think that would be very useful if you're using the same set of props a lot.
Vue prop types also allow any object with a constructor as a valid
type
, so you can create your own custom prop types that way. I've never experimented with that, but I'm sure there's a good use case for it.Good to know about the alternate ways to use prop types, I hadn't considered using a constructable object, certainly that would be useful if you were passing around instances of said items rather than keeping a class/function in sync with a prop type definition.
In terms of using a separate file, indeed very useful for prop types that are used in multiple places (think Users, Avatars, Posts, etc.).
Which tip is your favourite?
The 25, i never use before. Thanks man
No problem!
Superb..!! Very coprehensive and directive.
In case any one is starting withVuejs project here is an open source vuejs admin template. Materio Free Vuetify VueJS Admin Template>
Thanks for sharing this!
You are welcome!
Incredible. Ty!
You are very welcome 😊
Note that for preprocessors you can use
::v-deep
selector.Yes, you can use
>>>
,::v-deep
, or/deep/
. They all work the same, but some pre-processors don't like>>>
.vue-loader.vuejs.org/guide/scoped-...
This is great, i started vue and these helped me out quite a bit
Which tip was most interesting to you?
state sharing
Hi, Thanks, the article is very good!
I have a question:
tip 15: But what if a prop type is added or removed from the Icon component? To cover those cases we can use v-bind and a computed prop to keep things dynamic.
What does this mean? Can you help me? Thanks.
mean:
<Icon v-bind="iconProps" />
?This post is amazing.
Glad you liked it 😊
Holy cow, this content is worthy of a book! Thanks! Now I have something to study and master Vue as I've made it my go-to framework for front end development
Thanks! Vue is definitely a great choice of framework 👌
Quite a lot new to me.
Surely make use of them
Thanks
Glad I could help!
Dear Michael Thiesseni,may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.
Absolutely! That would be incredible.
Thank you very much!
Awesome post 👌
Learn many things again about VueJs 🚀
What was one of the things you learned from the post?
Shorthand for single scoped slot / and errors handling. Awesome tips thanks a lot again 😀
Nice
Thats one great article, thank you! :)
Finally a list with useful tips that you don't already know after your first app!
Thank you for these amazing tips. My favorites were 4. Know when to use v-if (and when to avoid it) and 12. Destructuring in a v-for. I have never used tip#12
Nice post!
Thanks!