# Improve Vue Options API Code

Vue Options API projects often lose type safety and correct this binding. This skill gives focused rules for safer Vue 3 components.

## Install

```bash
npx skillstore add github.com/vuejs-ai/vuejs-ai-vue-options-api-best-practices
```

## Metadata

- Status: approved
- Slug: vuejs-ai-vue-options-api-best-practices
- Version: 2.0.0
- Author version: 2.0.0
- Skillstore revision: r1
- Version status: valid
- Tree hash: ebf5718a83caa9e5f9c8464cf7bf5a3d9fc4369f97af872e93fdd996d34abb47
- Author: github.com/vuejs-ai
- GitHub username: vuejs-ai
- License: MIT
- Repository: https://github.com/vuejs-ai/skills/tree/main/skills/vue-options-api-best-practices/
- 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: 81
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/vuejs-ai-vue-options-api-best-practices
- Manifest: https://skillstore.pages.dev/api/skills/vuejs-ai-vue-options-api-best-practices/manifest

## Capabilities

- Explains when Options API methods and lifecycle hooks need regular functions.
- Shows how defineComponent improves TypeScript inference for Vue components.
- Guides PropType usage for objects, arrays, functions, and union props.
- Recommends strict TypeScript settings for safer this context.
- Covers typed event handlers, computed return types, and provide or inject limits.
- Highlights debounced or throttled method state that belongs in lifecycle hooks.

## Use Cases

- Fix this binding bugs: Review Options API methods and lifecycle hooks so component data remains accessible at runtime.
- Improve component type inference: Apply defineComponent, strict mode, PropType, and event parameter types to reduce any usage.
- Standardize Vue review guidance: Use the references to flag risky patterns and suggest consistent Options API fixes.

## Prompt Templates

### Check this binding

```
Review this Vue Options API component for arrow functions in methods or lifecycle hooks. Suggest regular function replacements.
```

### Add TypeScript safety

```
Inspect this Vue 3 Options API component. Recommend defineComponent, strict TypeScript settings, and typed event handler changes.
```

### Harden props and computed types

```
Review the props and computed options. Suggest PropType declarations, runtime validators where useful, and explicit computed return types.
```

### Audit legacy Options API patterns

```
Audit these Vue Options API files for this binding, TypeScript inference, prop typing, provide or inject typing, and stateful method lifecycle issues.
```

## Limitations

- It provides guidance and examples, not an automated linter.
- It focuses on Vue Options API, not Composition API migration.
- It assumes the assistant can inspect the target Vue component files.
- It does not guarantee runtime validation for PropType-only annotations.

## Best Practices

- Use method shorthand for Options API methods and lifecycle hooks.
- Enable strict TypeScript settings and wrap components with defineComponent.
- Use PropType for complex props and add validators when runtime structure matters.

## Anti Patterns

- Do not use arrow functions where Vue must bind this.
- Do not rely on Object or Array constructors for complex TypeScript prop types.
- Do not leave event handler parameters implicit in strict TypeScript projects.

## Security Audit

- Audited at: 2026-07-07T06:56:35.322\+00:00
- Summary: The static alerts are false positives caused by Markdown code fences, TypeScript template literals, Vue documentation links, and DOM event property names. No prompt injection, secret handling, command execution, or executable network behavior was found in the reviewed skill content.

## Stats

- Views: 154
- Downloads: 29
- Favorites: 0
- Popularity score: 0