# Improve Vue 3 TypeScript Practices

Vue TypeScript projects often hit confusing template, router, and Volar errors. This skill gives targeted Vue 3 fixes for Codex, Claude, and Claude Code.

## Install

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

## Metadata

- Status: approved
- Slug: hyf0-vue-best-practices
- Version: 8.0.0
- Author version: 8.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: 7f2c6ed5792d376c7b4099fbf1daccf3de7c15104454a4ed2f3fc1dd981146f4
- Author: hyf0
- GitHub username: hyf0
- License: MIT
- Repository: https://github.com/hyf0/vue-skills/tree/master/skills/vue-best-practices/
- Ref: a06681402992ceae98ba04d54cfd4ab004862696
- 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: filesystem, external\_commands, network
- Quality score: 81
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/hyf0-vue-best-practices
- Manifest: https://skillstore.pages.dev/api/skills/hyf0-vue-best-practices/manifest

## Capabilities

- Guides prop type extraction for wrapper components and component libraries.
- Explains vue-tsc strict template settings for undefined components and data attributes.
- Covers Volar 3, Vue Language Server, and editor configuration changes.
- Provides fixes for Vue Router typed params and module resolution.
- Documents testing patterns for Pinia stores and CSS modules.
- Includes SSR HMR troubleshooting steps for Vite and Nuxt projects.

## Use Cases

- Fix Template Type Errors: Diagnose strict template errors, missing component types, data attributes, and compiler option gaps.
- Improve Component Libraries: Type wrapper components, fallthrough attributes, component props, emits, and CSS module access.
- Stabilize Vue Tooling: Plan Volar upgrades, Vite plugin cleanup, SSR HMR fixes, and module resolution changes.

## Prompt Templates

### Review a Vue Component

```
Review my Vue 3 component for TypeScript and template type issues. Explain the likely cause and the smallest safe fix.
```

### Fix Typed Route Params

```
Help me fix Vue Router typed params in this page. Use route-specific typing and avoid broad assertions when possible.
```

### Audit Wrapper Components

```
Review these wrapper components for prop extraction, fallthrough attributes, emits typing, and CSS module mistakes.
```

### Plan a Volar Migration

```
Create a migration plan for Volar 3 and vue-tsc in this repository. Include editor settings, package checks, and rollback notes.
```

## Limitations

- It provides guidance and examples; it does not run project migrations automatically.
- Some version-specific advice may need verification against current package releases.
- Commands in examples should be reviewed before use in production repositories.
- It focuses on Vue 3, TypeScript, Volar, Vite, Pinia, and Vue Router.

## Best Practices

- Use narrow Vue compiler options and document why each setting is enabled.
- Prefer type-safe route helpers before broad type assertions.
- Verify editor, language server, and package versions before changing configuration.

## Anti Patterns

- Do not disable strict template checks to hide component typing problems.
- Do not duplicate Vue plugins across Vite config and inline build config.
- Do not copy cleanup commands without checking the current project directory.

## Security Audit

- Audited at: 2026-07-06T15:59:22.388\+00:00
- Summary: The static findings are false positives caused by documentation examples, markdown code fences, and reference links. I found no prompt injection, data exfiltration intent, or unauthorized execution behavior in the cited files.

## Stats

- Views: 299
- Downloads: 38
- Favorites: 0
- Popularity score: 0