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”.

    
{{ item }}
    

    
 
        v-for="(item, index) in itemList" 
        :key="index" 
        @click="deleteItem(index)">
        {{ item }}
    

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.

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

3. Use Pascal Case or Use kebab case for Components

• The best practices is 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.

// 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 multiple problems at development time.of projects.

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.

    
	  
	v-for="(item, index) in itemList" 
	:key="item.id"
	@click="deleteItem(index)">
	{ item }}
    

     

	    {{ item }}
    
 

• 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.

  

    
    
Value(emitted from child-component): {{value}}
  


 

  

    Enter Value: 
    Save
  

 

 

 11. Data should Always Return Function

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

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

12.  Template Expressions should only have Basic JavaScript Expressions

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

 

   
 
	v-for="(item, index) in itemList" 
	:key="index" 
	@click="deleteItem(index)">
        {{
	      normalizedItemValue(item)
        }}
   

private normalizedItemValue(value: string) {
    return value
      .split(" ")
      .map(word => {
        return word[0].toUpperCase() + word.slice(1);
      })
      .join(" ");
  }

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.

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
 

2. Vue Application Security

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

1. Enable XSS Protection Mode

2. Avoid Typical XSS Mistakes

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

3. Use Captcha

4. Audit Dependencies Regularly

5. Use of Third-party Packages

6. Disable our App to Load in an iframe 

7. Displaying Generic Error Message for Authentication

3. Conclusion Want to embed this image? Please cite source to TatvaSoft.com

Please include attribution to TatvaSoft.com with this graphic.