# Improve Vue 3 Code Quality

Vue projects often collect reactivity, component, and performance mistakes over time. This skill gives targeted Vue 3 guidance for safer patterns and clearer code.

## Install

```bash
npx skillstore add vuejs-ai/vue-best-practices
```

## Metadata

- Status: approved
- Slug: vuejs-ai-vue-best-practices
- Version: 17.0.0
- Author version: 17.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: d9de7319fc316b3ef8716aa47aeeceee648418501aad44275d94fce7fbadb459
- Author: vuejs-ai
- GitHub username: vuejs-ai
- License: MIT
- Repository: https://github.com/vuejs-ai/skills/tree/main/skills/vue-best-practices/
- Ref: 26421118b848d9f1efc0aa169d8a7a9e7e0a877e
- 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, filesystem
- Quality score: 82
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/vuejs-ai-vue-best-practices
- Manifest: https://skillstore.pages.dev/api/skills/vuejs-ai-vue-best-practices/manifest

## Capabilities

- Reviews Vue components for Composition API and script setup patterns.
- Explains reactivity pitfalls involving refs, reactive objects, computed values, and watchers.
- Guides Vue Router, Pinia, KeepAlive, Suspense, Teleport, and async component decisions.
- Identifies performance risks in lists, transitions, scoped CSS, and render functions.
- Provides TypeScript and SSR guidance for common Vue application structures.

## Use Cases

- Review Vue Components: Find reactivity, prop, emit, slot, and template issues before a pull request is merged.
- Plan Vue 3 Migration: Move Options API code toward Composition API and script setup while preserving project behavior.
- Improve App Performance: Diagnose watcher misuse, large list rendering, transition cost, and SSR hydration concerns.

## Prompt Templates

### Review One Component

```
Use vue-best-practices to review this Vue component for Composition API, prop handling, and template issues. List the highest impact fixes first.
```

### Refactor Options API

```
Use vue-best-practices to refactor this Options API component into Vue 3 script setup with TypeScript. Preserve behavior and explain compatibility risks.
```

### Diagnose Performance

```
Use vue-best-practices to diagnose reactivity, watcher, list rendering, and transition performance issues in this Vue feature. Recommend measured fixes.
```

### Plan SSR Architecture

```
Use vue-best-practices to plan Vue SSR improvements for hydration, async components, and request-isolated state. Include tests and rollout checks.
```

## Limitations

- It is reference guidance, not an automated linter or test runner.
- It does not verify behavior without project files, runtime logs, or tests.
- Some advice assumes Vue 3 and may need adjustment for Vue 2 projects.
- It cannot replace framework security review for production applications.

## Best Practices

- Share the relevant Vue files and describe the current runtime behavior.
- Ask for prioritized findings when reviewing large components or migrations.
- Validate suggested changes with tests, type checks, and browser behavior.

## Anti Patterns

- Do not ask it to enforce patterns without checking project conventions.
- Do not copy examples without adapting them to your state model and routing setup.
- Do not treat performance advice as proven without measuring the affected workflow.

## Security Audit

- Audited at: 2026-07-09T14:36:53.795\+00:00
- Summary: All static findings reviewed as false positives from Markdown reference examples, Vue template literals, or defensive security guidance. No prompt injection attempt, exfiltration intent, command execution path, or executable malware behavior was found in the reviewed skill content.

## Stats

- Views: 982
- Downloads: 130
- Favorites: 0
- Popularity score: 0