5 Useful VueJS Tips to Improve Your Building Experience

by author Nwose Lotanna Victor

In today’s post, we will learn a few tips to help you in your web development journey to build more efficient Vue JS applications.

Use readable naming conventions

This is something you might have heard before, readability is really important especially for a project that involves collaboration or working with other people. Here are a few suggestions that are considered best practices:

Use PascalCase while naming components

NewComponent.vue ✅
newcomponent.vue 🛑
Newcomponent.vue 🛑

Name Parent component with children in a way that you can read them.

FooterSection.vue
FooterSectionHeading.vue
FooterSectionIcons.vue
FooterSectionButton.vue

You can also try naming components without children in their DOM tree with “the” prefixes.

TheNavbar.vue

The whole idea is readability, also most importantly make sure to stay consistent with whatever convention you choose to use.

Validate Props data type

Props basically provide a platform for you to pass data from a parent component to its child, making our application a tree-like structure. It is important however to ensure that when you create props in Vue you explicitly specify the data type.

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function
}

This is an example from the Vue documentation, there are also ways to create your own custom validation you can check out in the docs.

Do not directly manipulate the DOM

Coming from a CSS, HTML, and JS background it is easy to build Vue apps while still working directly with the DOM, this is not bad however it is very important to note that Vue uses the virtual DOM which is an abstracted version of the DOM that makes compile happen more efficiently and avoids re-rendering the entire DOM on every change. That alone improves efficiency and resource management to a great degree because the DOM API is called less often.
This means that you do not really need to do something like this in your Vue component:

<input type="checkbox" @change="logStatus" />

This input is used to log the status of the power supply while a service technician works on the electric board.

methods: {
  logStatus() {
    const isOn = document.getElementById('thecheckbox').checked;
    if( isOn ) {
      console.log('Light is on');
    } else {
      console.log('Light is off');
    }
  }
}

You can see the getElement call is a DOM API call and this can easily be made more efficient if you approached it this way instead.

data() {
  return {
    isOn = false
  }
},
methods: {
  logStatus() {
    if(this.isOn) {
      console.log('Light is on');
    } else {
      console.log('Light is off');
    }
    this.isOn = !this.isOn;
  }
}

This achieves the same result and you can even toggle the state as you can see easily without having to reach into the DOM API. Whatever it is you can do with pure JS, chances are there is a more efficient way to do it in the virtual DOM and if you cannot find it, check out Vue Refs.

Embrace computed properties

Computed properties are another really essential Vue JS tool you need, they are calculations you use to describe a value or property that is bound to another value or property. Vue JS uses it to handle data changes in the most efficient way possible to update the DOM when you want it to.
A good use case will be filtering through a list or array, imagine you had a few hundred cars and the information on their manufacturers’ country in a list and you want to know which of them is German.

<div v-for=’car in cars’ v-if=’car.country =="Germany"' >

You can use V-for to loop through the list, some people would use V-if like it is above to make the condition or filtering. This looks good however, Vue’s compiler prioritizes v-for over v-if and so your desired outcome might not be what you get and the list (imagine it has 1 million items) would be looped through every single time. This as you can already tell is not efficient at all, you can use computed properties to ensure this works well for you.

<div v-for='car in counteryFilter'>
//....
computed: {
  countryFilter: () => {
    return this.cars.filter(function (car) {
      return car.country =="Germany"
    })
  }
}

This way, you get this filtering done for you and the loop is more efficient, the computed property would also be checked once and only checked again if there are any dependency changes. Finally, it brings logic out of the template section so that our code is cleaner and readable.

Vue GUI

This is a very interesting one, yes you read that correctly Vue CLI has a GUI tool that you might not know about. Go into your terminal and type the command below:

vue ui

If you have Vue JS already installed globally on your machine, this command should open your default browser at localhost:8000

You can kill the port anytime you like, if you click the home button you can create a new project or open an already existing project without the CLI commands.

You can go through all the prompts, the exact prompt you get with the CLI to create a new Vue project. If you click on Plugins, you would see a kind of Vue plugin marketplace with already existing plugins and suggestions by Vue depending on the project. You can install a plugin with just 1 click.

You can add dependencies and configs like the ESlint config and other ones. You can serve your app in the dev server, test it or even build it out for production.

It is such a powerful tool and very suited for beginners, so make sure to check it out yourself.

Open Source Session Replay

Debugging a VueJS application in production may be challenging and time-consuming. OpenReplay is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue.
It’s like having your browser’s inspector open while looking over your user’s shoulder.
OpenReplay is the only open-source alternative currently available.

Happy debugging, for modern frontend teams - Start monitoring your web app for free.

Extra tip - The documentation

The Vue JS docs is one of the best resources for learning anything related to Vue, the team is doing an exceptional job of making sure it is easy to understand, try out and implement in your workflow.

There is even a very extensive style guide inside the Vue Docs that you should definitely check out.

Conclusion

These are a few Vue JS tips to use to make you build faster, write cleaner and more efficient code in Vue JS. An added bonus is using VS Code, you can install a few extensions like Prettier, Vetur, and Vue VS Code snippets to help your workflow with speed, auto-complete, and auto-correct services.

Which of these are you already using?