# Build Better Vue and Nuxt Components

Vue teams need consistent guidance for components, reactivity, and state flow. This skill gives Claude, Codex, and Claude Code practical Vue 3 and Nuxt 3 review rules.

## Install

```bash
npx skillstore add vuejs-ai/vue-development-guides
```

## Metadata

- Status: approved
- Slug: vuejs-ai-vue-development-guides
- Version: 17.0.0
- Author version: 17.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: d530883f3107a91874c7fa0b675f0d9023bf5f2b58d2d9036780ee77ecdfed54
- Author: vuejs-ai
- GitHub username: vuejs-ai
- License: MIT
- Repository: https://github.com/vuejs-ai/skills/tree/main/skills/vue-development-guides/
- Ref: 36e07d5e13068e5be64447e8f20b427cf2cbd21a
- 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, network
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/vuejs-ai-vue-development-guides
- Manifest: https://skillstore.pages.dev/api/skills/vuejs-ai-vue-development-guides/manifest

## Capabilities

- Recommends Composition API defaults for Vue 3 and Nuxt 3 projects.
- Guides ref, reactive, shallowRef, computed, and watcher usage.
- Reviews Vue single-file component structure and template patterns.
- Explains props, emits, v-model, provide, and inject data flow.
- Compares composable stores, VueUse global state, and Pinia.
- Encourages splitting large components into focused components and composables.

## Use Cases

- Review a Vue component: Check a component for reactivity mistakes, unclear data flow, and SFC structure issues.
- Standardize code reviews: Use shared guidance when reviewing Nuxt components, composables, and state management choices.
- Guide generated Vue code: Ask Claude, Codex, or Claude Code to apply Vue conventions before producing edits.

## Prompt Templates

### Start a Component

```
Create a Vue 3 component for [feature]. Use Composition API, script setup, typed props, emits, and scoped styles.
```

### Review Reactivity

```
Review this Vue code for reactivity issues. Check ref, reactive, computed, watch, and async cleanup patterns.
```

### Refactor Data Flow

```
Refactor this parent and child component design. Use props, emits, v-model, or provide/inject where each choice fits.
```

### Design State Strategy

```
Recommend a state management approach for this Vue or Nuxt feature. Compare composable stores, VueUse global state, and Pinia.
```

## Limitations

- It provides guidance only and does not run project tests.
- It assumes Vue 3 or Nuxt 3 and is not a Vue 2 migration guide.
- It does not replace official framework documentation for version-specific changes.
- Example snippets may need adaptation for each project architecture.

## Best Practices

- Use Composition API and typed script setup unless the project has another standard.
- Keep source state minimal and derive values with computed properties.
- Choose the smallest state sharing pattern that fits the feature.

## Anti Patterns

- Do not store derived values in refs when computed values can express them.
- Do not mix v-if and v-for on the same element.
- Do not use a global store for short-lived component state.

## Security Audit

- Audited at: 2026-07-07T06:44:29.337\+00:00
- Summary: Reviewed all 22 static findings; each is a false positive from Markdown guidance, inline code spans, TypeScript template literals, or a relative Vue fetch example. No prompt injection, command execution, external endpoint, credential access, or data exfiltration intent was found.

## Stats

- Views: 169
- Downloads: 30
- Favorites: 0
- Popularity score: 0