Keeping props DRY in Vue.js

If you have some experience in Vue.js, you’ve probably seen a lot of this…

<cat-component :breed="breed" :color="color" :size="size" />

This way of declaring props can be so repetitive that it hurts. Wouldn’t something like this be better?

<cat-component :breed :color :size />

You’d think so, but in fact a feature request for this was considered and rejected by the Vue team. Here’s what Evan You had to say about it…

…I am not really a fan of this proposal but it wasn’t immediately clear to me what turned me off… I realize it’s because of the semantic implication of HTML attributes that have no values — they are usually boolean attributes. An attribute with no value indicates the “presence of an attribute” or “truthiness”. Implicitly expanding to a binding overloads this perception.

In addition — if a prop in the child component is declared with type Boolean, the presence of the attribute indicates a true value. This would cause prop and :prop to have very different meanings, and is technically a breaking change.

OK, that makes sense. But does that mean that our code must be so horridly verbose?

Nope! If your project supports ES6, then you can do this…

<cat-component v-bind="{breed, color, size}" />

Now that’s better. Still winning, Vue ;-)

If you liked this post, you can check out Passing methods as props in Vue.js.