When transitioning from one project to another (for example when changing jobs) there is always this period of time when I need to adjust to the new project flow and development process.
There are things that are unique for certain projects but in Vue, there are things that are considered good practices for building clean and maintainable Vue based projects.
In this article, I would like to list these best practices so that you can start using them in your Vue projects :)
Enjoy!
🟢 10 Tips to Write Cleaner Vue.js Code
Clean and maintainable code is the backbone of any successful application. Vue.js, with its intuitive API, makes it easy to write clean code, but there’s always room for improvement. Here are 10 actionable tips to help you write cleaner Vue.js code.
1. Use the Composition API Wisely
Break large logic into smaller, reusable composables to maintain modularity and readability.
Example: Instead of cramming all logic into a setup() function, create custom hooks for distinct functionalities.
2. Follow Vue’s Naming Conventions
Use PascalCase for component file names and optionally kebab-case for template usage.
Example: Name your component UserProfile.vue and use it as <UserProfile /> or optionally <user-profile /> in templates.
3. Avoid Overusing Vuex or Pinia
Keep transient UI states (e.g., modal visibility) local to the component rather than in global state management.
Example: Use ref or reactive for temporary states.
4. Utilize Slots Effectively
Use named slots for better flexibility in reusable components and document their usage.
Example: Create a Card component with <slot name="header"></slot> for customizable headers.
5. Leverage Scoped Styles
Use scoped styles in <style scoped> tags to prevent CSS conflicts.
Example: Apply component-specific styles without affecting other parts of the application.
6. Write Reusable Components
Break down UI elements into reusable, focused components, avoiding overly generic designs.
Example: Instead of hardcoding a button, create a configurable Button component that supports props for different styles.
7. Handle Asynchronous Code Gracefully
Use async/await for API calls and handle errors using a central utility function.
Example: Create a useApi composable to encapsulate API logic and error handling.
8. Document Props and Emit Events
Clearly define and document props and events using props and emit annotations or TypeScript.
Example: Use defineProps and defineEmits in Vue 3 for clarity and type safety.
9. Lint Your Code
Set up ESLint and Prettier with Vue-specific configurations to enforce code quality and consistency.
Example: Integrate linting into your CI/CD pipeline to automate code reviews.
10. Keep Templates Simple
Avoid placing complex logic in templates; instead, use computed properties or methods.
Example: Replace v-if="list.filter(item => item.active).length > 0" with a computed property activeItems.
📖 Learn more
If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:
It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉
✅ Summary
Well done! By following these tips, you’ll create Vue.js applications that are easier to maintain, scale, and debug. Clean code benefits not just the current project but also future developers who may work on it. Start small by implementing a few of these practices today!
Take care and see you next time!
And happy coding as always 🖥️
Top comments (1)
Awesome tips! These will definitely help in writing cleaner and more efficient Vue.js code.