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)

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

These features are 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, it 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 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 makes our code more readable, but it also allows 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 these 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 these 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 requires 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 the complexity in managing all these 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’ applications.

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 developers 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 behaviours, they usually solve these “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, on 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 to, you can use the key attribute.

Adding this attribute to a component, will make sure that a component is “re-rendered” every time its 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 re-rendering 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.