# Build Vue 3 Components with Composition API

Vue projects need consistent patterns for state, components, and TypeScript. This skill gives Claude, Codex, and Claude Code focused Vue 3 references for practical implementation work.

## Install

```bash
npx skillstore add antfu/vue
```

## Metadata

- - Slug: antfu-vue
- - Version: 1.0.0
- - Author: antfu
- - GitHub username: antfu
- - License: MIT
- - Repository: https://github.com/antfu/skills/tree/main/skills/vue/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Risk factors: external\_commands, scripts, network
- - Quality score: 75
- - Public page: https://skillstore.pages.dev/skills/antfu-vue
- - Manifest: https://skillstore.pages.dev/api/skills/antfu-vue/manifest

## Capabilities

- Guides Vue 3 component work with script setup and TypeScript patterns.
- Explains ref, reactive, computed, watch, and watchEffect usage.
- Covers props, emits, slots, v-model, and lifecycle hooks.
- Documents composables, custom directives, and template refs.
- Provides guidance for provide/inject, async components, and Suspense.
- Points to Vue documentation references for each covered topic.

## Use Cases

- Create Typed Components: Build Vue components with typed props, emits, slots, and v-model patterns.
- Refactor Shared Logic: Move repeated stateful behavior into composables that preserve reactivity and cleanup side effects.
- Review Vue Patterns: Check whether component code follows Composition API, lifecycle, and async handling guidance.

## Prompt Templates

### Create a Basic Component

```
Create a Vue 3 component using script setup and TypeScript. Include typed props, a simple computed value, and clear template structure.
```

### Add Component Events

```
Update this Vue component to use typed defineEmits and defineModel where appropriate. Explain the parent usage in plain language.
```

### Extract a Composable

```
Refactor this repeated Vue logic into a composable. Preserve reactivity after destructuring and include cleanup for side effects.
```

### Audit Async Vue Flow

```
Review this Vue async component flow. Identify Suspense requirements, loading and error states, watcher cleanup, and safer alternatives.
```

## Limitations

- Does not execute or test Vue application code.
- Does not include routing, Pinia, Nuxt, or build-tool setup guidance.
- Focuses on Vue 3.5 and may not fit older Vue 2 projects.
- Examples are reference snippets and may need adaptation for a real app.

## Best Practices

- Use script setup with TypeScript for new Vue 3 components.
- Prefer refs for destructurable state and return plain objects from composables.
- Clean up watchers, timers, and event listeners created by reusable logic.

## Anti Patterns

- Do not destructure reactive objects when the destructured values must stay reactive.
- Do not use top-level await without planning the required Suspense boundary.
- Do not mix untyped props and emits when component contracts are important.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T09:59:09.443\+00:00
- - Summary: Static analysis reported many high and medium patterns, but review found documentation examples rather than executable skill code. Backticks, dynamic imports, fetch calls, and Vue terminology appear inside Markdown reference material and do not show command execution, exfiltration, prompt injection, or malicious intent. The skill is safe to publish with low residual risk from community-authored documentation snippets.

## Stats

- - Views: 187
- - Downloads: 19
- - Favorites: 0
- - Popularity score: 0