Vue Best Practices

What it does

The antfu-vue-best-practices skill provides a collection of best practices and guidelines for developing Vue applications. It helps developers write clean, efficient, and maintainable code by following industry-standard conventions and patterns.

When to use it

• When setting up a new Vue project and looking for guidance on structuring components and state management.
• When refactoring an existing Vue application to improve performance or readability.
• When preparing documentation or training materials for Vue developers.
• When ensuring consistency across a team working on a Vue-based frontend.

Key capabilities

• Code structure recommendations for components, directories, and file naming.
• Best practices for state management using Vuex or Pinia.
• Guidelines for component composition and reusability.
• Performance optimization tips such as lazy loading and code splitting.
• Linting and formatting suggestions with ESLint and Prettier.

Example prompts

• "How should I structure my Vue components for large-scale applications?"
• "What are the best practices for managing state in a Vue 3 application?"
• "Can you provide guidelines on optimizing performance in Vue projects?"

Tips & gotchas

• Ensure your project is using Vue 2 or Vue 3, as some recommendations may vary between versions.
• Combine this skill with linter tools like ESLint to enforce best practices automatically.