DEV Community

Cover image for General Coding Standards for Vue js.
Dharmendra Kumar
Dharmendra Kumar

Posted on

General Coding Standards for Vue js.

Here are additional good and bad practices for Vue.js:

General Coding Standards

  1. Avoid Magic Numbers and Strings:
    • Use constants for values that are used repeatedly or have special meaning.
   // Good
   const MAX_ITEMS = 10;

   function addItem(item) {
     if (items.length < MAX_ITEMS) {
       items.push(item);
     }
   }

   // Bad
   function addItem(item) {
     if (items.length < 10) {
       items.push(item);
     }
   }
Enter fullscreen mode Exit fullscreen mode
  1. Use v-for Efficiently:
    • When using v-for, always provide a unique key to optimize rendering.
   <!-- Good -->
   <div v-for="item in items" :key="item.id">
     {{ item.name }}
   </div>

   <!-- Bad -->
   <div v-for="item in items">
     {{ item.name }}
   </div>
Enter fullscreen mode Exit fullscreen mode
  1. Avoid Inline Styles:
    • Prefer using CSS classes over inline styles for better maintainability.
   <!-- Good -->
   <div class="item">{{ item.name }}</div>

   <style scoped>
   .item {
     color: red;
   }
   </style>

   <!-- Bad -->
   <div :style="{ color: 'red' }">{{ item.name }}</div>
Enter fullscreen mode Exit fullscreen mode

Component Practices

  1. Component Reusability:
    • Design components to be reusable and configurable through props.
   // Good
   <BaseButton :label="buttonLabel" :disabled="isDisabled" @click="handleClick" />

   // Bad
   <button :disabled="isDisabled" @click="handleClick">{{ buttonLabel }}</button>
Enter fullscreen mode Exit fullscreen mode
  1. Prop Validation:
    • Always validate props using type and required attributes.
   // Good
   props: {
     title: {
       type: String,
       required: true
     },
     age: {
       type: Number,
       default: 0
     }
   }

   // Bad
   props: {
     title: String,
     age: Number
   }
Enter fullscreen mode Exit fullscreen mode
  1. Avoid Long Methods:
    • Break down long methods into smaller, more manageable methods.
   // Good
   methods: {
     fetchData() {
       this.fetchUserData();
       this.fetchPostsData();
     },
     async fetchUserData() { ... },
     async fetchPostsData() { ... }
   }

   // Bad
   methods: {
     async fetchData() {
       const userResponse = await fetch('api/user');
       this.user = await userResponse.json();
       const postsResponse = await fetch('api/posts');
       this.posts = await postsResponse.json();
     }
   }
Enter fullscreen mode Exit fullscreen mode
  1. Avoid Computed Properties with Side Effects:
    • Computed properties should be used for pure computations and not for side effects.
   // Good
   computed: {
     fullName() {
       return `${this.firstName} ${this.lastName}`;
     }
   }

   // Bad
   computed: {
     fetchData() {
       // Side effect: fetch data inside a computed property
       this.fetchUserData();
       return this.user;
     }
   }
Enter fullscreen mode Exit fullscreen mode

Template Practices

  1. Use v-show vs v-if:
    • Use v-show for toggling visibility without adding/removing elements from the DOM, and v-if when conditionally rendering elements.
   <!-- Good: Use v-show for toggling visibility -->
   <div v-show="isVisible">Content</div>

   <!-- Good: Use v-if for conditional rendering -->
   <div v-if="isLoaded">Content</div>

   <!-- Bad: Use v-if for simple visibility toggling -->
   <div v-if="isVisible">Content</div>
Enter fullscreen mode Exit fullscreen mode
  1. Avoid Large Templates:
    • Keep templates clean and small; break them into smaller components if they become too large.
   <!-- Good: Small, focused template -->
   <template>
     <div>
       <BaseHeader />
       <BaseContent />
       <BaseFooter />
     </div>
   </template>

   <!-- Bad: Large, monolithic template -->
   <template>
     <div>
       <header>...</header>
       <main>...</main>
       <footer>...</footer>
     </div>
   </template>
Enter fullscreen mode Exit fullscreen mode

State Management Practices

  1. Use Vuex for State Management:
    • Use Vuex for managing complex state across multiple components.
   // Good
   // store.js
   export default new Vuex.Store({
     state: { user: {} },
     mutations: {
       setUser(state, user) {
         state.user = user;
       }
     },
     actions: {
       async fetchUser({ commit }) {
         const user = await fetchUserData();
         commit('setUser', user);
       }
     }
   });
Enter fullscreen mode Exit fullscreen mode
  1. Avoid Direct State Mutation in Components:
    • Use mutations to modify Vuex state rather than directly mutating state in components.
   // Good
   methods: {
     updateUser() {
       this.$store.commit('setUser', newUser);
     }
   }

   // Bad
   methods: {
     updateUser() {
       this.$store.state.user = newUser; // Direct mutation
     }
   }
Enter fullscreen mode Exit fullscreen mode

Error Handling and Debugging

  1. Global Error Handling:
    • Use Vue’s global error handler for catching and handling errors.
   Vue.config.errorHandler = function (err, vm, info) {
     console.error('Vue error:', err);
   };
Enter fullscreen mode Exit fullscreen mode
  1. Provide User Feedback:
    • Provide clear feedback to users when an error occurs.
   // Good
   methods: {
     async fetchData() {
       try {
         const data = await fetchData();
         this.data = data;
       } catch (error) {
         this.errorMessage = 'Failed to load data. Please try again.';
       }
     }
   }

   // Bad
   methods: {
     async fetchData() {
       try {
         this.data = await fetchData();
       } catch (error) {
         console.error('Error fetching data:', error);
       }
     }
   }
Enter fullscreen mode Exit fullscreen mode

By adhering to these additional practices, you can further enhance the quality, maintainability, and efficiency of your Vue.js applications.

Top comments (0)