vue3-best-practices

---
name: vue3-best-practices
description: Vue 3 performance optimization and best practices guidelines for modern frontend applications. This skill should be used when writing, reviewing, or refactoring Vue 3 code to ensure optimal performance patterns, proper Composition API usage, and modern development practices. Triggers on tasks involving Vue 3 components, Composition API, reactivity, state management, or performance optimization.
license: MIT
---

# Vue 3 Best Practices

Comprehensive performance optimization and development guide for Vue 3 applications. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

## When to Apply

Reference these guidelines when:
- Writing new Vue 3 components or composables
- Implementing reactive data and computed properties
- Reviewing code for performance issues
- Refactoring from Vue 2 to Vue 3
- Optimizing bundle size or load times
- Working with state management (Pinia/Vuex)
- Implementing async operations in components

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Reactivity Performance | CRITICAL | `reactivity-` |
| 2 | Component Optimization | CRITICAL | `component-` |
| 3 | Bundle Size & Loading | HIGH | `bundle-` |
| 4 | Composition API | MEDIUM-HIGH | `composition-` |
| 5 | Template Performance | MEDIUM | `template-` |
| 6 | State Management | MEDIUM | `state-` |
| 7 | Lifecycle Optimization | LOW-MEDIUM | `lifecycle-` |
| 8 | Advanced Patterns | LOW | `advanced-` |

## Quick Reference

### 1. Reactivity Performance (CRITICAL)

- `reactivity-ref-vs-reactive` - Use ref for primitives, reactive for objects
- `reactivity-shallow-ref` - Use shallowRef for large immutable objects
- `reactivity-computed-caching` - Leverage computed property caching
- `reactivity-watch-vs-watcheffect` - Choose appropriate watcher
- `reactivity-unref-performance` - Minimize unref calls in hot paths
- `reactivity-readonly-immutable` - Use readonly for immutable data

### 2. Component Optimization (CRITICAL)

- `component-async-components` - Use defineAsyncComponent for heavy components
- `component-functional` - Use functional components for simple presentational logic
- `component-keep-alive` - Cache expensive components with keep-alive
- `component-lazy-hydration` - Implement lazy hydration for non-critical components
- `component-prop-validation` - Use efficient prop validation
- `component-emit-performance` - Optimize event emissions

### 3. Bundle Size & Loading (HIGH)

- `bundle-tree-shaking` - Structure imports for optimal tree-shaking
- `bundle-dynamic-imports` - Use dynamic imports for code splitting
- `bundle-plugin-imports` - Use unplugin-auto-import for better DX
- `bundle-lodash-imports` - Import lodash functions individually
- `bundle-moment-alternatives` - Use day.js instead of moment.js
- `bundle-icons-optimization` - Optimize icon imports and usage

### 4. Composition API (MEDIUM-HIGH)

- `composition-script-setup` - Prefer <script setup> for better performance
- `composition-composables-reuse` - Extract reusable logic into composables
- `composition-provide-inject` - Use provide/inject for dependency injection
- `composition-expose-selectively` - Expose only necessary properties
- `composition-reactive-transform` - Use reactive transform where appropriate
- `composition-auto-import` - Configure auto-imports for better DX

### 5. Template Performance (MEDIUM)

- `template-v-once` - Use v-once for static content
- `template-v-memo` - Use v-memo for expensive list rendering
- `template-key-optimization` - Optimize v-for keys for performance
- `template-conditional-rendering` - Choose v-if vs v-show appropriately
- `template-slot-performance` - Optimize slot usage and scoped slots
- `template-directive-optimization` - Create efficient custom directives

### 6. State Management (MEDIUM)

- `state-pinia-optimization` - Optimize Pinia store structure
- `state-store-composition` - Use store composition patterns
- `state-persistence` - Implement efficient state persistence
- `state-normalization` - Normalize complex state structures
- `state-subscription` - Optimize state subscriptions
- `state-devtools` - Configure devtools for debugging

### 7. Lifecycle Optimization (LOW-MEDIUM)

- `lifecycle-cleanup` - Properly cleanup resources in onUnmounted
- `lifecycle-async-setup` - Handle async operations in setup
- `lifecycle-watchers-cleanup` - Clean up watchers and effects
- `lifecycle-dom-access` - Access DOM safely in lifecycle hooks
- `lifecycle-ssr-considerations` - Handle SSR lifecycle differences

### 8. Advanced Patterns (LOW)

- `advanced-teleport-usage` - Use Teleport for portal patterns
- `advanced-suspense-async` - Implement Suspense with async components
- `advanced-custom-renderer` - Create custom renderers when needed
- `advanced-compiler-macros` - Use compiler macros effectively
- `advanced-plugin-development` - Develop efficient Vue plugins

## Framework Integration

### Vite Integration
- Utilize Vite's fast HMR and build optimizations
- Configure proper chunk splitting strategies
- Use Vite plugins for Vue-specific optimizations

### TypeScript Integration
- Leverage Vue 3's improved TypeScript support
- Use proper type definitions for better DX
- Configure TypeScript for optimal build performance

### Testing Integration
- Use Vue Test Utils with Composition API
- Implement efficient component testing strategies
- Optimize test performance and reliability

## How to Use

Read individual rule files for detailed explanations and code examples:

```
rules/reactivity-ref-vs-reactive.md
rules/component-async-components.md
rules/composition-script-setup.md
```

Each rule file contains:
- Brief explanation of why it matters
- Incorrect Vue 3 code example with explanation
- Correct Vue 3 code example with explanation
- Performance impact and measurements
- Additional context and Vue 3-specific considerations

## Migration from Vue 2

Special considerations for migrating from Vue 2:
- Composition API vs Options API patterns
- Reactivity system changes and optimizations
- Component definition and registration updates
- Event handling and lifecycle changes

## Performance Monitoring

Tools and techniques for monitoring Vue 3 performance:
- Vue DevTools integration
- Performance profiling with browser tools
- Bundle analysis and optimization
- Runtime performance monitoring