vue3-best-practices

Original：🇺🇸 English

Translated

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.

3installs

Sourceeva813/vue3-skills

Added on2026-02-11

NPX Install

npx skill4agent add eva813/vue3-skills vue3-best-practices

SKILL.md Content

View Translation Comparison →

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


reactivity-
component-
bundle-
composition-
template-
state-
lifecycle-
advanced-

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