Get Better at Vue

Get Better at Vue

Learn these best practices and tips for getting better at writing Vue 3.

Vue.js is a popular JavaScript open-source front-end development framework that can create single-page apps. Vue.js developers may construct powerful apps using this language by using a single file component instance. You may mix the code using Vue.js to improve performance. Because of its lightweight nature and distinct framework design ideas, the Vue.js framework outperforms designs such as Angular and React.

The best practices provide the most efficient code and a developer after you can easily understand your code. Before starting, these tips mostly work on version 3 of Vue. Without wasting any more time, let's get into it!

1. Use key in v-for

While we use the key attribute in the v-for directive section, it will always help the Vue app to be constant and the data can be manipulated whenever we want. It can also be used to identify the elements in a list that can be easily updated. The term "Keys" is most commonly used for HTML lists, animations, and Vue transitions. As an example, we can say that without the use of the :key, DOM will not update the UI properly. It will get confused about which record to update when duplicate records exist in the list. So, if we want to update the last item from the list, the code will always update the first item if we don’t use the :key.

We have multiple solutions for using :key:

  • You can specify a unique value in what you rendering (usually its "ID"):
    <div v-for="item in items" :key="item.id">
    <!-- content -->
    </div>
    
  • Another solution is using index of that item:
    <div v-for="(item,index) in items" :key="index">
    <!-- content -->
    </div>
    

    The best practice is to use the index of that item, combined with an extra string. For example, if you are rendering users, you can say:

    <div v-for="(item,index) in items" :key="`user-${index}`">
    <!-- content -->
    </div>
    

You can find more details about key in official Vue documentation

2. Do Not Use v-if and v-for Together

Vue does not allow you to use v-if and v-for on the same element. While compiling the template, Vue.js verifies all v-if conditions. It takes a long time. To accomplish the same result, we may apply the v-if condition to the parent tag or template.

I'll explain with examples:

<ul>
  <li
    v-for="(item, index) in itemList"
    v-if="itemList && itemList.length > 0"
    :key="item.id"
    @click="deleteItem(index)"
  >
    { item }}
  </li>
</ul>

With the above code, we can check if the condition is in v-if all the time when rendering the list or not.

<ul v-if="itemList && itemList.length > 0">
  <li
    v-for="(item, index) in itemList"
    :key="item.id"
    @click="deleteItem(index)"
  >
    {{ item }}
  </li>
</ul>

This usage is best solution for this problem.

3. Simplify your :class and v-if logic

With all of the power of v-directives, it's easy to forget that we still have access to powerful JavaScript capability in our templates.

For example, suppose you want to set a class but only when a user is on one of three different routes. When you first construct this logic, it will most likely look something like this:

:class="
  $route.name === 'home'
  || $route.name === 'login' 
  || $route.name === 'signup' 
  ? 'foo-class' 
  : ''
"

Then you might learn to shorten it as follows:

:class="{ 
  'foo-class' : 
  $route.name === 'home'
  || $route.name === 'login' 
  || $route.name === 'signup'
}"

However, the best method to write it is as follows:

:class="{ 
  'foo-class' : 
  ['home', 'login', 'signup'].includes($route.name)
}"

And if, like me, you don't like all that trash junking up your template, there's a simple fix:

<template>
  <div :class="classByRoute">
    Changes based on route
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const classByRoute = computed(()=>{
    return 'foo-class' : 
      ['home', 'login', 'signup'].includes(route.name)
  })
</script>
<style>
.foo-class {
  background: red;
}
</style>

This is not only more readable, but it is also much easier to expand on afterwards.

4. Use NuxtJS

After you get used to Vue 3, you should think about using Nuxtjs. Many concerns, such as SSR and dynamic routing, are solved if you aim to construct a production-ready Vue application. It also provides an ecosystem of plugins that you may employ to speed up the development of your application. Most significantly, it includes a great loading screen to keep you entertained while your program is compiling.

For more info about Nuxt 3 and the benefits of it, you can check my Early Nuxt 3 Review article or you can directly visit Nuxt 3 Documentation.

Ending

Yes, that was the Vue 3 tips and tricks for you to get better at Vue. Thank you for reading, and I hope you enjoyed the content; if so, please show your appreciation by leaving an emoji or sharing with your friends.

If you want to keep up with me, you can find me on Twitter | LinkedIn or simply visit my website.

Did you find this article valuable?

Support Yusufcan Yılmaz by becoming a sponsor. Any amount is appreciated!