Vue.js is a popular JavaScript open-source front-end building platform that is entirely capable of designing single-page applications. Using this language, Vue.js developers can use a single file component instance to build rich applications. For better performance, you can combine the codes with Vue.js. Vue.js framework offers advantages over architectures like Angular and React because of its lightweight nature and unique framework design principles.

Using our technical expertise and experience, we have curated some of the evolving best practices in this blog. Since Vue.js is becoming more and more favourable, these quick tricks will help you to develop an effortless web application.

1. Vue.JS Best Practices

1. Always use key v-for with “: key” inside

  • 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. An example of this “Keys” is the most used for HTML lists, animations, and Vue transitions.As an example, we can say 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”.

  Let’s check it practically:

Example: Render List Without the Key

For the demonstration we made one list of computer parts with no IDs assigned. In the code, we have added one functionality where if you click on any part, it will delete it from the list.

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

Once we run the above code, we will see a list printed on the browser as shown below. Now let’s try to delete the last item (highlighted one from the below image) of the list.

delete the last item

When we click on that item, instead of deleting the last item from the list, it will delete the third item from the list. As both are duplicate records. So, it will delete the records that come first in the list. So, the output will be like the below.

duplicate records

Example: Render list with the key

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

Once we click on the last item to delete, it will actually delete the last item with the key.

delete the last item with the key

2. Always use kebab Casing for Events 

  • It is advisable to use a kebab case where you need to emit custom events. This takes place at the time of using shared components where the same syntax is used for broadcast as well as to listen to the event.
  • when you use kebab casing for the custom events, it will be easy to identify which is a parent component.

Let see an example of kebab-case for event names which comes with component names:

Item Child Component:

// handle data and give it back to parent
this.$emit('value-update', this.localValue) 

APP Parent Component: 

<template>
  <div class="container">
    <item :value="value" @value-update="handleData"></item>
  </div>
</template>

3. Use Pascal Case or Use kebab case for Components

  • The best way to name a conventional component is by using a Pascal case or use kebab case. The most consistent attribute is the “Import attribute” which is irrespective of whichever project one chooses to work on.
# Avoid
itemcomponent.vue || itemComponent.vue || Itemcomponenrt.vue
 
# Good Practice
ItemComponent.vue

4. Keep npm Packages Updated

  • As per Vue Style guide base components can only contain HTML elements, 3rd party UI components and other additional based components.
  • Try to regularly update npm packages to avoid any dependency errors and to use the latest/updated features provided by individual packages.
  • As an example, if you have configured vuetify the design patterns in the VueJS project, vuetify regularly updates its packages to provide the best UI including some breaking changes sometimes. So, it’s better to update NPM packages regularly to avoid bulky or breaking changes at a time of need. We also know about visual studio code- an inbuilt feature that supports base components.
npm outdated // run to check outdated npm packages
npx npm-check-updates -u // run to check updates outdated npm packages
npm install // run to update npm packages

5. Manage Global File for Shared Variable 

  • To make the system more generic and easier to update anytime, manage global configurations (i.e. API URLs. Third-party URLs if any, keys can be used in any integrated tool, theme settings) or in a separate file (i.e environment.json). It will be helpful once your website is live to update any global configurations without any re-deployments.

6. Used Suitable Data Type Assign for Variable

  • Continuously use proper data types instead of “any” to minimize the casting time and other casting errors.
  • Avoid any casting inside the loops.
  • In a case of two data types assigned to the same property, implement type casting using both the types and using conditions.

Example:

// Wrong
const age: any = 0; [hard to identify response type at the places this variable used and also hard to track errors on assignments]
 
// Right
const age: number = 0; [easy to track and identify response type]

7. Data Property Initialization

  • It is recommended to initialize all the data properties that need to be reactive in advance in the data option.
  • Vue.js constantly observes the change in data by recursively running through data parts.
  • Use the Watch prop to get the latest values depending on another instead of creating multiple getters and setters. (Avoid the use of a watch inside the array of objects).
  • Avoid memory leaks – remove custom events, instances, intervals when base components are destroyed.

8. Used a $refs

  • Always used $refs to get results from DOM and try to minimize the use of JavaScript.
  • Avoid the use of jQuery, instead, use typescript because typescript allows code rendering faster and to catch and rectify more problems at development time.

9.  Do Not Mix v-if and v-for

  • In Vue, You don’t use v-if on the same element as v-for. While Vue.js compiles the template, it checks all time v-if conditions. It is time-consuming. Instead, we can apply the V-if condition to the parent tag or template to achieve the same.

Let see one example,

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

In the above code, we will be able to check if the condition resides in v-if all time while rendering the list or not.

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

Here, v-if applied to ul tag, so the v-if condition will be checked only once before rendering v-for items. 

Some of the undiscovered advantages of Vue.js rendering are

  • Rendering is an efficient process because there is no looping for each item repeatedly.
  • Every time you change the dependency, the filtered list gets re-evaluated.
  • Rendering helps you differentiate the component logic from the template, which makes the component more readable in the user interface.

10.  Vue Component Reusability & Communication

  • From the Vuex store, you have access to all the reusable components and reusable code of Vue.js. Vue’s reusable component is very flexible to use. Try to make a common component with maximum required props and reuse it in all other pages. As an example, you can create common components for the confirmation messages. (You can pass dynamic confirmation text, button text, icons name, etc.). Same way confirmation you can create one component for add/edit functionality with the same model and bindings using the Vue component library.
  • Data communication between parent and child components in Vue using “props” and “event emitter” is explained below. Once created, we can reuse the object across the single page application by adding required props and code in the component.

Example:

In parent component (App.vue):

<template>
  <div class="container">
    <item :value="value" @onvaluechange="handleData"></item>
    <h3>Value(emitted from child-component): {{value}}</h3>
  </div>
</template>
<style scoped="">
.container{text-align: center;}
</style>
 
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Item from "@/components/ItemComponent.vue";
 
@Component({
  components: { Item },
})
export default class App extends Vue {
  private value: string = "Vue.js Application";
 
  private handleData(data: string) {
    // get the data after child dealing
    this.value = data;
  }
}
</script>

In Child Component (Item.vue):

<template>
  <div>
    <label>Enter Value: </label><input v-model="localValue" type="text">
    <button class="save-btn" @click="submitValue">Save</button>
  </div>
</template>
 
<style scoped="">
.save-btn{margin: 10px;}
</style>
 
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
 
@Component
export default class ChildComponent extends Vue {
  @Prop({default: ""}) private value: string;
 
  private localValue: string = "";
 
  private mounted() {
    this.localValue = this.value // save props data to itself's data and deal with it
  }
 
  private submitValue() {
    this.$emit('onValueChange', this.localValue) // handle data and give it back to parent
  }
}
</script>

For the custom components, we can use “v-model” to create two-way data binding without using props and event emitters.

Use “eventBus” in unrelated components for data communication.

 11. Data should Always Return Function

When you declare a Vue component data, that aspect of data should return a value. In other cases when it does not return an output, that information of data will be shared at all instances of the component value.

Example:

In the below Vue example, the functional data is not returning any output. So, you cannot access properties outside the data function. It will generate a runtime error.

 data: {
    value: "Vue.js Application",
    itemList: [],
    counter: 0
  },

Right Way:

data: function () {
    return {
      value: "Vue.js Application",
      itemList: [],
      counter: 0
    };
  },

12.  Template Expressions should only have Basic JavaScript Expressions

In the Vue template, you applied more complex logic and some formatting variables like (date formatting). Let’s see the first example, we can see more complex logic in the template. What kind of issue we will face in the future.

<ul v-if="itemList && itemList.length > 0">
    <li> 
        v-for="(item, index) in itemList"
	:key="index"
	@click="deleteItem(index)">
        {{
             item.split(' ').map(function (word) {
               return word[0].toUpperCase() + word.slice(1)
             }).join(' ')
        }}
   </li>
</ul>

In the above example, some formatting is applied to the item value. As you can see in the list tag, it will increase the LOC (line of code). At a time of some complex formatting or functionality, these LOC will increase in the template which will be difficult to manage and will be more confusing. So, it’s better to separate the bindings by keeping formatting or extra login in some function in code.

Creating a separate function for formatting.

<ul v-if="itemList && itemList.length > 0">
   <li> 
	v-for="(item, index) in itemList" 
	:key="index" 
	@click="deleteItem(index)">
        {{
	      normalizedItemValue(item)
        }}
   </li>
</ul>
private normalizedItemValue(value: string) {
    return value
      .split(" ")
      .map(word => {
        return word[0].toUpperCase() + word.slice(1);
      })
      .join(" ");
  }

In this “update” function example, we have added a new Vue function (normalizedItemValue) to manage UI formatting to make UI clean, easy to understand, and easy to update.

The image shown below is an output of the entered item name that is displayed as the first character in the upper case.

output of the entered item

13. Clean Code and Refactoring

  • Use a shared/separate file for the static functions/properties for re-usability. It will be helpful to keep a shared/static code at the same file in the entire solution.
  • Use eslint or tslint analysis tools to maintain code quality.
  • In Vue, you can reduce the line of code by narrowing down the UI into smaller components.
  • Use keywords (Const/Let) provided by typescript smartly instead of the var keyword of javascript.

Example:

Bad:
var test: number = 0;
 “Identifier 'test' is never reassigned; use 'const' instead of 'var'”
 
You will get the above error if tslint is configured properly when you run the project
 
Good:
const test: number = 0; // if static, use const
let test: number = 0; // if updateable, use let

Let’s see now common security best practices for Vue.js Application

2. Vue Application Security

While developing an application using Vue.js, we’re mostly concerned about performance, SEO, API calls, and UI/UX, so the security of the existing application is often overlooked. There are thousands of malicious attacks that can happen from the frontend side, some of which are mentioned below:

  • Unrestricted File Upload
  • Clickjacking
  • XSS Attack
  • SQL injection
  • A denial-of-service attack (DoS attack)
  • Session hijacking

So to overcome this we have collected some of the Vue.js best practices to always keep in mind while developing web applications.

1. Enable XSS Protection Mode

In the case where an attacker hacks and inserts a malicious code in the user input, we can enable the “X-XSS-Protection”: “1; mode=block” header by preventing the response. The advanced browsers are well equipped with XSS protection mode were adding an X-XSS-Protection header is highly recommended. This gives an assurance to the old browsers on higher security concerns that do not support CSP headers.

2. Avoid Typical XSS Mistakes

An XSS attack is typically monitored in DOM API’s inner HTML section. Say for an example.

document.querySelector('.application').innerHTML = value;

It is possible that the attacker can unknowingly insert a malicious code using the above line. So it is advisable not to set the inner HTML value-based on the user input. Instead of that, you can use textContent.

3. Use Captcha

You should always promote using captcha at the end-points where there is a larger audience to address. Examples are login, registration or contact id. If you ask what is Captcha then A captcha is a computerized program or system that is designed to differentiate between humans and robots. It also prevents DoS (Denial Of Service) attacks.

4. Audit Dependencies Regularly

Auditing dependencies packages means checking if installed NPM packages are upgraded to the latest version or not.

Run npm audit commands regularly to audit packages. This command shows all outdated versions of packages and vulnerable packages and suggests upgrading packages to the latest version.

5. Use of Third-party Packages

The more you use third-party packages, there can be security issues rising as vulnerabilities in open-source libraries. This will instigate hackers to do more fraud. While selecting Vue.js components from the package to integrate with the application, the expert Vue.js developer needs to check if the library is open source or not as lack of transparency poses a security risk, if the library is well-documented, recommended, meets specific requirements, and is actively supported by the author.

6. Disable our App to Load in an iframe 

We should disable loading our app into the iframe. To restrict the rendering of a website in an iframe, you can enable the DENY option in X-Frame.

7. Displaying Generic Error Message for Authentication

While you are developing a user authentication form you must keep in mind certain factors. In your form, if the user enters the wrong password then a message is displayed saying “Your Password is incorrect”. This is not a good way because it helps an attacker to identify your email address or user id as valid and the password is wrong. Then the attacker starts a brute-force attack or dictionary attack to find the password for that user. That is no good for us. The solution is, you just display a message like ‘Incorrect login detail entered’.

3. Conclusion

With this, we have reached the end of the blog. We hope you found this insightful and will help you in maintaining best practices while developing apps using Vue.js. With our experience, we have curated these tricks and tactics that will help Vue.js developers to make code easily maintainable and accessible. Hopefully, these tips were useful to you because that is what we intended for your development process to be seamless and hassle-free. Cheers!

VueJS-Infographic
Want to embed this image? Please cite source to TatvaSoft.com

Share this Image On Your Site

profile-image
Vishal Shah

Vishal Shah has an extensive understanding of multiple application development frameworks and holds an upper hand with newer trends in order to strive and thrive in the dynamic market. He has nurtured his managerial growth in both technical and business aspects and gives his expertise through his blog posts.

Want to Hire Skilled Developers


    Comments

    • Leave a message...

    Related Articles
    Node.js BEST PRACTICES AND SECURITY
    Mar 12, 2021
    ReactJS Best Practices and Security
    Mar 15, 2021
    Angular Best Practices and Security
    Feb 23, 2021