General Coding Standards for Vue js.

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

General Coding Standards

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); } }

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>

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>

Component Practices

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>

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 }

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(); } }

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; } }

Template Practices

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>

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>

State Management Practices

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); } } });

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 } }

Error Handling and Debugging

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); };

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); } } }

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

Discover more from Coursity

Subscribe to get the latest posts sent to your email.