DEV Community

Cover image for 25 Vue Tips You Need to Know

25 Vue Tips You Need to Know

Michael Thiessen on July 21, 2021

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 ...
Collapse
 
jvdl profile image
John van der Loo

One of your code samples isn't quite correct for tip #15. You've got:

// Do some processing beforehand
Object.entries(Icon.props).forEach((key, val) => {
  iconProps[`icon${key.toUpperCase()}`] = val;
});
Enter fullscreen mode Exit fullscreen mode

Where it should be:

// Do some processing beforehand
Object.entries(Icon.props).forEach(([key, val]) => {
  iconProps[`icon${key[0].toUpperCase() + key.substring(1)}`] = val;
});
Enter fullscreen mode Exit fullscreen mode

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:

export const iconPropType = {
  type: {
    type: String,
    required: true
  },
  size: sizePropType,
  colour: {
    type: String,
    default: "#000"
  }
};
export const sizePropType = {
  type: String,
  default: "medium",
  validator: (size) => ["small", "medium", "large", "x-large"].includes(size)
};
Enter fullscreen mode Exit fullscreen mode

Icon.vue script:

import { iconPropType } from "./prop-types";
export default {
  props: {
    ...iconPropType,
  },
}
Enter fullscreen mode Exit fullscreen mode

Example usage:

import Icon from "./Icon";
import { iconPropType } from "./prop-types";

export default {
  components: { Icon },
  props: { icon: iconPropType },
};
Enter fullscreen mode Exit fullscreen mode

The icon can then be used as <Icon v-bind="icon" />

Collapse
 
michaelthiessen profile image
Michael Thiessen

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.

Collapse
 
jvdl profile image
John van der Loo

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.).

Collapse
 
michaelthiessen profile image
Michael Thiessen

Which tip is your favourite?

Collapse
 
nasirdoe profile image
Muhamad Nasir

The 25, i never use before. Thanks man

Collapse
 
michaelthiessen profile image
Michael Thiessen

No problem!

Collapse
 
theme_selection profile image
ThemeSelection

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>

Collapse
 
michaelthiessen profile image
Michael Thiessen

Thanks for sharing this!

Collapse
 
theme_selection profile image
ThemeSelection

You are welcome!

Collapse
 
royalfig profile image
Ryan Feigenbaum

Incredible. Ty!

Collapse
 
michaelthiessen profile image
Michael Thiessen

You are very welcome 😊

Collapse
 
drumstix42 profile image
Mark

Note that for preprocessors you can use ::v-deep selector.

Collapse
 
michaelthiessen profile image
Michael Thiessen

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-...

Collapse
 
nove1398 profile image
nove1398

This is great, i started vue and these helped me out quite a bit

Collapse
 
michaelthiessen profile image
Michael Thiessen

Which tip was most interesting to you?

Collapse
 
nove1398 profile image
nove1398

state sharing

Collapse
 
webpig profile image
朱宝华

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.

Collapse
 
webpig profile image
朱宝华 • Edited

mean: <Icon v-bind="iconProps" /> ?

Collapse
 
treboryx profile image
Robert

This post is amazing.

Collapse
 
michaelthiessen profile image
Michael Thiessen

Glad you liked it 😊

Collapse
 
ozzythegiant profile image
Oziel Perez

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

Collapse
 
michaelthiessen profile image
Michael Thiessen

Thanks! Vue is definitely a great choice of framework 👌

Collapse
 
webdev710 profile image
webdev-710

Quite a lot new to me.
Surely make use of them

Thanks

Collapse
 
michaelthiessen profile image
Michael Thiessen

Glad I could help!

Collapse
 
qq449245884 profile image
qq449245884

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.

Collapse
 
michaelthiessen profile image
Michael Thiessen

Absolutely! That would be incredible.

Collapse
 
qq449245884 profile image
qq449245884

Thank you very much!

Collapse
 
geminii profile image
Jimmy

Awesome post 👌
Learn many things again about VueJs 🚀

Collapse
 
michaelthiessen profile image
Michael Thiessen

What was one of the things you learned from the post?

Collapse
 
geminii profile image
Jimmy

Shorthand for single scoped slot / and errors handling. Awesome tips thanks a lot again 😀

Collapse
 
rauschmerscen profile image
Rausch Merscen

Nice

Collapse
 
mat3uszkek profile image
Mateusz Skrobiś

Thats one great article, thank you! :)

Collapse
 
rogierstegeman profile image
Rogier Stegeman

Finally a list with useful tips that you don't already know after your first app!

Collapse
 
bakhtiuz profile image
Baxtiyor Sulaymonov • Edited

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

Collapse
 
sherrydays profile image
Sherry Day

Nice post!

Collapse
 
michaelthiessen profile image
Michael Thiessen

Thanks!