Five quick tips and tricks on VueJs

VueJs has grown into popularity, and most recently with the release of its latest major version, it is essential that you need to learn how to use it properly.

If you want to bring your skills to the next level, then you are in luck. As I’ve compiled a selection of essential tips and tricks that will improve your code output. Read on to discover how to get the most out of the framework.

1. v-model (former .sync)

If may surely have already heard and used v-model before in the context of form fields. But this directives is actually more useful that you may think. This can be applied on ANY component (previously in v2 you had to use the .sync notation if you wanted to apply this on elements that were NOT form input).

This features is extremely useful when applying two way data binding on component (usually required for Base/dumb components).

Documentation link of v-model: https://v3.vuejs.org/guide/migration/v-model.html#\_3-x-syntax

2. v-bind

When learning VueJs is very common to see properties being passed one by one using the v-bind:property="foo" or the shorthand notation :property="foo".

Unfortunately, the above syntax can get very lengthy and make our html quite busy:

<myComponent
  :name="user.name"
  :surname="user.surname"
  :age="user.age"
  :gender="user.gender" />

VueJs comes with a very handy feature. In fact the v-bind directives can be used with ONE or MORE properties at the same time.. so in the above code can actually be summarized with:

<myComponent
 v-bind="user" />

The above code will automatically apply each single properties to our component. This not only made our code more readable, but it also allowed it to be flexible with feature enhancement

Documentation on v-bind: https://v3.vuejs.org/api/directives.html#v-bind

3. Teleport

If you have been in development long enough. You have surely struggled with components such as Overlays, Modal and popups.

The problem with this components is that they require at times to be defined at the very root of the DOM, but they are actually called and managed by nested components.

Luckily in Vue 3 we have a built in component called the teleport that will help us in achieving just that..

Documentation for teleport: https://v3.vuejs.org/guide/teleport.html#teleport

4. Multi Props type

Vue Js provides a great API to help us define our component properties.

As much as we want to avoid this situations, sometimes they are just needed. This could be caused by strange APIs (we have all worked with this), and or data flows.

This scenario require us to be “flexible” on the type of our properties. I have seen many people defining multiple properties to solve this problem:

icon:{
  type: String,
  required: false
},
icons:{
  type: Array,
  required: false
}

The above approach is not wrong, but may lead to dirty code and furthermore introduce more bugs due to to complexity in managing all this properties.

VueJs allows us to actually define multiple types in our properties. The above could be changed to:

icons:{
  type: [String, Array],
  required: true
}

As you can see, thanks to the ability to merge the two, we have also been able to set this to required.

The documentation for the properties type and validation is: https://v3.vuejs.org/guide/component-props.html#prop-validation

5. Key

Last but not least, I want to talk about one of the most annoying and hard to find “bug” that I had to fix in companies application.

You have probably seen and used the “key” attribute when using a v-for, but you may have not actually fully understood its use, or more importantly that it can actually be the key for many bugs that you have raised within your application.

Many developer assume that if a component is not on screen it is actually not rendered, and furthermore, they also expect the component to actually “reset” itself if it is hidden and then reused. When developers start to see bugs and or strange behaviour, they usually solve this “issues” by adding a multitude of watch or methods to catch and avoid the problem from replicating.

In most cases the problem is due to the component rendering ONCE, and ONCE only and in many times rendering BEFORE the data is ready, an or in unexpected times.

If you would like to take control on when a component is rendered, and make sure that its lifecycles mounted is called when you want too, you can use the key attribute.

Adding this attribute to a component, will make sure that a component is “re-rendered” every time it value changes. For example, if we would add on the sidebar of our app like below, we could make sure that the sidebar is “re-rendered” on every path change:

<Sidebar :key="route.fullPath" />

It is important to realise that adding the key attribute should only be done in cases in which we want FULL control of the rendering and rerendering of the component, as there are performance costs involved in using it.

The documentation for the key attribute is: https://v3.vuejs.org/api/special-attributes.html#key

Thank you all for reading the above, and please do not hesitate to provide me any comments and suggestion to improve the post and help future readers.