DEV Community

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

Read full post

John van der Loo • Oct 8 '21

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;
});

Where it should be:

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

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)
};

Icon.vue script:

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

Example usage:

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

export default {
  components: { Icon },
  props: { icon: iconPropType },
};

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

Michael Thiessen • Oct 8 '21

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.

John van der Loo • Oct 9 '21

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

Michael Thiessen • Jul 21 '21

Which tip is your favourite?

Muhamad Nasir • Jul 21 '21

The 25, i never use before. Thanks man

Michael Thiessen • Jul 22 '21

No problem!

ThemeSelection • Sep 15 '21

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>

Michael Thiessen • Sep 20 '21

Thanks for sharing this!

ThemeSelection • Sep 24 '21

You are welcome!

Ryan Feigenbaum • Jul 21 '21

Incredible. Ty!

Michael Thiessen • Jul 21 '21

You are very welcome 😊

Mark • Jul 24 '21

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

Michael Thiessen • Jul 26 '21

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

nove1398 • Jul 24 '21

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

Michael Thiessen • Jul 26 '21

Which tip was most interesting to you?

nove1398 • Jul 26 '21

state sharing

朱宝华 • Dec 25 '21

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.

朱宝华 • Dec 25 '21 • Edited

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

Robert • Jul 24 '21

This post is amazing.

Michael Thiessen • Jul 26 '21

Glad you liked it 😊

Oziel Perez • Jul 24 '21

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

Michael Thiessen • Jul 26 '21

Thanks! Vue is definitely a great choice of framework 👌

webdev-710 • Jul 22 '21

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

Thanks

Michael Thiessen • Jul 22 '21

Glad I could help!

qq449245884 • Jul 24 '21

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.

Michael Thiessen • Jul 26 '21

Absolutely! That would be incredible.

qq449245884 • Jul 27 '21

Thank you very much!

Jimmy • Jul 25 '21

Awesome post 👌
Learn many things again about VueJs 🚀

Michael Thiessen • Jul 26 '21

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

Jimmy • Jul 26 '21

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

Rausch Merscen • Jul 31 '21

Nice

Mateusz Skrobiś • Jul 25 '22

Thats one great article, thank you! :)

Rogier Stegeman • Jul 18 '22

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

Baxtiyor Sulaymonov • Nov 25 '21 • 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

Sherry Day • Jul 27 '21

Nice post!

Michael Thiessen • Jul 27 '21

Thanks!