# Build Better Vue 3 Applications

Vue projects become difficult when reactivity, component boundaries, and data flow are inconsistent. This skill applies structured Vue 3 guidance throughout implementation and review.

## Install

```bash
npx skillstore add antfu/vue-best-practices
```

## Metadata

- Status: approved
- Slug: antfu-vue-best-practices
- Version: 18.0.0
- Author version: 18.0.0
- Skillstore revision: r2
- Version status: valid
- Tree hash: 978914195f1385bf0bde438263e6d46542bca6f47ac15ec42a486005fbd4ab98
- Author: antfu
- GitHub username: antfu
- License: MIT
- Repository: https://github.com/antfu/skills/tree/main/skills/vue-best-practices/
- Ref: 89edfdc710d0846129dcee6a929477b04f08052c
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, scripts, network
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/antfu-vue-best-practices
- Manifest: https://skillstore.pages.dev/api/skills/antfu-vue-best-practices/manifest

## Capabilities

- Guides Vue 3 Composition API and TypeScript component structure.
- Plans focused component boundaries before non-trivial implementation.
- Reviews refs, reactive state, computed values, and watchers.
- Defines typed props, emits, models, and provide-inject contracts.
- Selects suitable composables, built-in components, directives, and plugins.
- Recommends list, memoization, animation, and update performance practices.

## Use Cases

- Modernize Vue Components: Refactor existing components into typed Composition API structures with clearer state and responsibilities.
- Standardize Team Architecture: Establish consistent component boundaries, data flow, composables, and file organization across a Vue codebase.
- Improve Rendering Performance: Review large lists, update hooks, memoization, and animation choices after application behavior is correct.

## Prompt Templates

### Review One Component

```
Review this Vue component for Composition API structure, reactivity, template safety, and clear props and emits. Explain the most important changes.
```

### Refactor a Feature

```
Refactor this Vue feature into focused components and composables. Preserve behavior, define typed contracts, and explain each responsibility boundary.
```

### Design Component Architecture

```
Create a component map for this Vue requirement. Define responsibilities, state ownership, props, emits, composables, and optional framework features.
```

### Audit Performance

```
Audit this Vue workflow for rendering costs. Prioritize measured bottlenecks involving lists, updates, memoization, async components, and state-driven animations.
```

## Limitations

- Assumes Vue 3 and prefers Composition API unless the project explicitly requires another style.
- Provides reference guidance and does not install dependencies or execute application code.
- Does not replace project tests, accessibility review, or browser verification.
- Performance recommendations still require measurements against the actual application.

## Best Practices

- Confirm the existing Vue architecture and project conventions before changing code.
- Keep source state minimal and derive values with pure computed properties.
- Measure behavior and performance before applying optional optimizations.

## Anti Patterns

- Do not place orchestration, state, and several independent interfaces in one large component.
- Do not use watchers to maintain values that computed properties can derive.
- Do not add advanced Vue features without a clear product or technical requirement.

## Security Audit

- Audited at: 2026-07-23T08:33:48.938\+00:00
- Summary: All 102 static findings are false positives in documentation and inert Vue examples. Backticks are Markdown spans or JavaScript template literals, while key and reconnaissance matches are lexical collisions. Dynamic imports and relative API calls illustrate normal application patterns and are not executed by the skill.

## Stats

- Views: 272
- Downloads: 32
- Favorites: 0
- Popularity score: 0