Vue Best Practices

What it does

The vue-best-practices skill provides guidance on implementing best practices when developing applications with Vue.js. It covers key areas such as component structure, state management, performance optimization, and code organization to help developers build scalable and maintainable Vue projects.

When to use it

• When structuring a new Vue project for long-term maintenance.
• When optimizing the performance of an existing Vue application.
• When onboarding new team members to a Vue-based codebase.
• When refactoring legacy Vue components into more modular, reusable structures.

Key capabilities

• Recommendations for component composition and separation of concerns.
• Guidance on using Vuex or Pinia for state management.
• Tips for optimizing rendering performance with v-once, keep-alive, and lazy loading.
• Best practices for organizing project structure (e.g., src directory layout).
• Advice on accessibility, testing, and code linting in Vue projects.

Example prompts

• "How should I organize my components in a large-scale Vue application?"
• "What are the best ways to optimize rendering performance in Vue?"
• "Can you explain how to implement state management with Pinia in Vue 3?"

Tips & gotchas

• Ensure your project is using Vue 2 or Vue 3, as some practices differ between versions.
• Combine this skill with linters like ESLint for enforcing code standards consistently across the team.