Top 10 Tips for using Vue

If you're in the moment of building your first Vue JS application. Then I have 10 tips for you about what you can do, use, and avoid, which helps you develop a more efficient and readable code that's easier to maintain and share.

And some tips are just plain old good advice.

Do you prefer to watch a video about this topic?

👉 Top 10 Tips for using Vue

Tip 1: Know the basics or not?

For the most, you will hear this everywhere.

If you want to use a framework like Vue.js productively, it's essential that you know the basics in HTML, CSS, and Javascript and how to use them. And if you start with web development, don't make the mistake of going straight into a framework.

It's essential to understand the relations and to know how it works under the hood. These are the cornerstones of everything, whether you use a framework like Vue JS or another one.

But using a framework makes some things easier for you in your daily work, especially in the beginning, and it also has a lot of benefits if you work in a team because you all use the same pattern.

So, on the other hand, why you don't jump straight into a framework like Vue.js? Learn what you need for the project you wanna build and skip the rest. You can learn how it works under the hood at a later time.

But many say you don't even know what you have to learn to build something. But, in my opinion, if you know what you want to build, then you just have to look for solutions and see their implementation right away. There are so many examples that you can use as a guide.

And you don't have to understand all of it right away. We can also learn something by imitating something and using it over and over again.

Overall, there are many ways on how you can learn web development. And there is only one direction on each path. Forward!

Tip 2: Follow the naming conventions

Even if you have heard this many times, naming conventions are fundamental. You can use this for every programming and markup language and, of course, for component file names. The naming convention's primary purpose is to give names meaning to be as informative as possible for the developer.

Some conventions have also been established for Vue.js.

For example, component names should always be multi-word. Use UserCard or ProfileCard instead of Card. Furthermore, child components tightly coupled with their parent should include the parent component name as a prefix. For example, UserCardImage or UserCardIcons.

If you have components that are used only once per page, you should start with the prefix "The" to indicate that it can only be one component. For example, TheNavbar or TheFooter.

Make sure that everything is organized, uniform, and understandable.

Tip 3: Stay consistent with your directive shorthands

In Vue js, you have the option to use a shorthand for the directives v-on and v-bind. These are the most used directives. It doesn't matter which style you use. But it's essential to stay consistent so that you get a more readable codebase.

Tip 4: Use Event Modifiers

Event Modifiers in Vue.js helps us to modify or exchange the default behavior of the dom events. For example, you can use the prevent modifier for submitting a form. Which stops the default reloading behavior.

<form @submit.prevent="submitMethod">
  // ...
</form>

Another example is you can use key-modifiers. They are helpful, easy to use, and we don't have to manually implement this kind of functionality. For example, you can add the enter key modifier to this search input field to call a function if the user hits the enter key.

<input type="text" value="" @keyup.enter="searchMethod" />

Vue provides many, many more for the most commonly used key-codes.

Tip 5: Understand the difference between a watcher and computed property

Watchers and computed properties are the most fundamental concepts in Vue.js. And they have many similarities, so it can be hard knowing which one is best for what you're trying to accomplish.

So when should we use the first one and when should we use the other?

Let's talk about the difference between a watched property and a computed property. This will help you to use which of them in a specific use case.

When we are building Vue components, we often need to respond to changes in our local data or props. And a watcher or watched property lets us track this kind of data and run a function whenever it changes.

The difference to a computed property is we only can react to one data property at a time. A computed property can react to changes in multiple data properties. And the best thing is, it's cached. So they only recalculate when things change.

But the important difference is that a computed property creates a new reactive property. For example, you can use it in your template, a method, or another computed property. A watched property only calls a function.

Depending on which functionality you need, you can use the first one or the other one.

Tip 6: Use Computed Properties for your dynamic class and style bindings

In some cases, you have a lot of class and style bindings in your template. But the problem is that it becomes very unreadable at some point. A possible solution would be to outsource parts from it or the entire object as a computed property. This makes your template readable again, and you can also make some bindings reusable.

<template>
  <div :class="bindCSSHeader">
</template>

computed: {
  bindCSSHeader() {
    return {'header', this.condition};
  }
}

Overall it's more organized and understandable.

Tip 7: Don't use v-if with v-for

It's super tempting to want to use v-if with v-for to filter elements of an array.

But that's a terrible practice. Don't do it again. The problem with this is that Vue.js in version 2 prioritizes the v-for directive over the v-if directive. So under the hood, it loops through every element and then checks Vue.js the v-if conditional.

This means that even if we only want to render a few elements from a list, we have to loop through the entire array.

A smarter solution can be to avoid such a condition and use a computed property, which filters the array. The benefit is Vue.js doesn't loop through the entire array, only the filtered computed property, which is also cached. In case you have massive arrays, this can be a huge performance improvement.

In Vue.js 3, it's the other way around. The v-if directive is prioritized over the v-for directive. But, that sounds not better, in my opinion, and we have other ugly behaviors, in the end.

Tip 8: Validate your props

Whenever we communicate with data, we need to validate the data to achieve an expected behavior. These also apply to any type of communication and happen when communicating from a Parent to Child Component.

There are several ways you can do that. And if you develop huge applications or working in a team, then it's essential to make sure that each component has the expected behavior.

props: {
  title: String,
  id: {
    type: Number,
    required: true
  }
}

So it can only be helpful to use it.

Tip 9: Don't manipulate the DOM directly:

We know the DOM is a tree-like data structure that comes into existence once an HTML document has been parsed by the browser. And the browser paints the DOM to the screen and will repaint it in response to user actions.

So far, so good.

But it's expensive to update the DOM. If we use Javascript to change our page, the browser has to do some work to find the required DOM nodes. And in some applications, there can be thousands of nodes in the DOM, and updates can be very expensive. Small, frequent updates will inevitably slow the page down.

The solution is, Vue.js uses a virtual DOM. Its primary purpose is to increase the speed and efficiency of DOM updates. And it offers some additional benefits as well.

The virtual DOM is the backbone of Vue.js performance. It contains a representation of each node from the real DOM tree. Finding the nodes that have changed in the Virtual DOM is much faster. This way, we bypass the terrible performance of searching and updating multiple nodes from the real DOM.

In other words, when a change is made in the application, the Virtual DOM compares itself to the real DOM, defines what has changed, and only updates what needs to be changed.

Vue.js is smart and efficient enough to only re-render what's needed, rather than the entire DOM.

So don't manipulate the DOM directly.

Tip 10: Know the power of Transitions

Vue offers several ways to control how an element or component visually appears or disappears in the DOM. Examples can be fading, sliding, rotating, or other visual effects. Almost all of this functionality is based around a single component: the transition component.

And in my opinion, transitions are not just for adding pretty flair to your application. A transition can be the difference between a user signing up, making a purchase, or altogether leaving your website.

The way Vue.js handles transitions and animations makes it super easy to add them to your application.

Vue.js gives you various ways to animate your application, including CSS transitions and animations and using JavaScript to manipulate the DOM during transition hooks.

Overall you can decrease the risk of users leaving your site with a good transition, so make use of it. It's a powerful feature.