vue-best-practices_skill

Overview

This skill provides concise, prioritized Vue.js performance optimization guidelines for building fast, maintainable applications. It groups 40+ rules into eight categories (reactivity, components, computed/watchers, templates, Composition API, state, async fetching, advanced patterns) so you can apply the highest-impact changes first. Use it to guide writing, reviewing, or refactoring Vue and Nuxt code with practical, outcome-focused recommendations.

How this skill works

The skill inspects tasks that touch components, reactivity, Composition API usage, state management, and performance hotspots, and recommends targeted rules to apply. Each rule explains the problem, a common incorrect pattern, the correct implementation, and why it matters, enabling automated refactors or developer-led fixes. Rules are prioritized by impact so you fix the most critical issues first and avoid low-value changes.

When to use it

• Writing new Vue components or composables to avoid costly anti-patterns up front
• Reviewing pull requests for regressions in reactivity, renders, or state usage
• Refactoring large components or stores to reduce re-renders and memory pressure
• Optimizing SSR or client hydration performance in Nuxt applications
• Investigating slow rendering, excessive watchers, or network-bound UI updates

Best practices

• Prefer ref() for primitives and reactive() for objects; use toRefs() when destructuring reactive objects
• Minimize reactive dependencies in computed properties and avoid deep watchers on large objects
• Use v-memo, v-once, and defineAsyncComponent to reduce render costs for static or heavy UI
• Return refs from composables, keep composables single-responsibility, and handle cleanup/lazy init
• Split state stores by domain, put business logic in actions, and clean up store subscriptions
• Use Suspense, abort controllers, and stale-while-revalidate patterns for predictable async fetching

Example use cases

• Refactor a data-heavy list to use v-memo and virtualized rendering to reduce frame drops
• Convert a component with many derived values to computed properties to prevent repeated calculations
• Split a monolithic Pinia store into domain stores and move expensive logic into actions
• Replace deep watchers with computed values or targeted watchers to avoid unnecessary recalculations
• Implement defineAsyncComponent for a rarely used modal to reduce initial bundle size