Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

vue-options-api-best-practices — Claude Code Vue 3 skill

Guidance for Vue 3 Options API components, covering TypeScript, method context, and lifecycle hook pitfalls. Useful when reviewing or writing Options API code.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a claude-code
Open on GitHub

What vue-options-api-best-practices does

The skill collects guidance on Options API typing, including component properties, this, event handlers, complex props, and computed return types. Its linked references show Options API solutions only.

It also covers methods and lifecycle hooks that lose component context, plus debounced methods whose state is shared across component instances. That shared state is worth checking when a component has multiple instances. Install it for Claude Code with npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a claude-code; the skill file is at ~/.claude/skills/vue-options-api-best-practices/SKILL.md.

What it helps with

  • infer component property types
  • type the Options API this context
  • fix lost context in methods and lifecycle hooks
  • check shared state in debounced methods
  • document types for complex props and computed values

Example prompts for the agent

  • Review this Vue 3 component for Options API typing issues, especially in `props` and `this`.
  • Explain why this component method loses its instance context and suggest an Options API fix.
  • Check whether this lifecycle hook and debounced method behave correctly across multiple component instances.

How to install vue-options-api-best-practices

1Skills CLI (Vercel)

npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a claude-code

2Manually: put the files in place

~/.claude/skills/vue-options-api-best-practices/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vue-options-api-best-practices/

From the same set7

The whole set →
vue-best-practices github.com/vuejs-ai Enforces Vue 3 guidelines using Composition API and TypeScript. Helpful for structuring SFCs, managing reactivity, and writing composables. Claude Code CX Codex Cursor +1 42,700installs vue-debug-guides github.com/vuejs-ai Skill for diagnosing Vue 3 errors: reactivity, watchers, components, templates, and hydration. When the agent sees a Vue bug, it looks up the cause in a catalog of common issues. Claude Code CX Codex Cursor +1 26,700installs vue-pinia-best-practices github.com/vuejs-ai A skill covering Pinia best practices: avoid common store setup errors, preserve reactivity, and organize state management patterns in Vue projects. Claude Code CX Codex Cursor +1 16,800installs vue-router-best-practices github.com/vuejs-ai Skill teaches AI coders Vue Router 4 patterns: navigation guards, route params handling, and component lifecycle synchronization. Prevents infinite redirects, memory leaks, and data desync. Claude Code CX Codex Cursor +1 14,900installs create-adaptable-composable github.com/vuejs-ai Skill for writing reusable Vue composables that accept values, refs, or getters and work the same way in all cases. Use it when you need a library-grade composable that adapts to different input types. Claude Code CX Codex Cursor +1 13,700installs vue-testing-best-practices github.com/vuejs-ai Skill offering Vue 3 testing patterns and best practices. It helps configure Vitest and write blackbox component tests without brittle assertions. Claude Code CX Codex Cursor +1 13,600installs

Similar

threejs-postprocessing CloudAI-X A skill that adds post-processing pass chains to Three.js: bloom, depth of field, ambient occlusion, and custom screen shaders. Use it when you need visual effects, color grading, or blur on WebGL and WebGPU. Claude Code CX Codex Cursor +1 13,500installs streamdown vercel Renders Markdown in React components with streaming support for AI agents, Shiki syntax highlighting, Mermaid diagrams, and KaTeX math rendering. Claude Code CX Codex Cursor +1 3,200installs threejs-lighting CloudAI-X Three.js r186 lighting skill for WebGL and WebGPU. It guides physical light units, cascaded shadow maps, and RectAreaLight setup. Claude Code CX Codex Cursor +1 13,100installs conversion-tracking coreyhaines31 Sets up, audits, and fixes web conversion tracking across ad platforms and analytics. It diagnoses missing events, double counting, and data discrepancies for lead gen and ecommerce. Claude Code CX Codex Cursor +1 2,400installs expo-app-clip expo Adds an iOS App Clip target to Expo projects — a lightweight app invoked from a URL without App Store installation. Claude Code CX Codex Cursor +1 19,600installs expo-web-to-native expo Guides an existing React web app into a native iOS/Android app with Expo. Use it for a staged screen-by-screen migration. Claude Code CX Codex Cursor +1 19,500installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about vue-options-api-best-practices

How do I install vue-options-api-best-practices in Claude Code?

Run npx skills add vuejs-ai/skills --skill vue-options-api-best-practices -a claude-code. The skill file is located at ~/.claude/skills/vue-options-api-best-practices/SKILL.md.

What does vue-options-api-best-practices do?

It provides Vue 3 Options API guidance for TypeScript, component method context, and lifecycle hooks. Its reference solutions use Options API.

What TypeScript topics does the skill cover?

It points to references on component property inference, event handler types, complex props, injected properties, and computed return types.

Source text

SKILL.md · MIT 
---
name: vue-options-api-best-practices
description: "Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only."
version: 2.0.0
license: MIT
author: github.com/vuejs-ai
---

Vue.js Options API best practices, TypeScript integration, and common gotchas.

### TypeScript
- Need to enable TypeScript type inference for component properties → See [ts-options-api-use-definecomponent](reference/ts-options-api-use-definecomponent.md)
- Enabling type safety for Options API this context → See [ts-strict-mode-options-api](reference/ts-strict-mode-options-api.md)
- Using old TypeScript versions with prop validators → See [ts-options-api-arrow-functions-validators](reference/ts-options-api-arrow-functions-validators.md)
- Event handler parameters need proper type safety → See [ts-options-api-type-event-handlers](reference/ts-options-api-type-event-handlers.md)
- Need to type object or array props with interfaces → See [ts-options-api-proptype-complex-types](reference/ts-options-api-proptype-complex-types.md)
- Injected properties missing TypeScript types completely → See [ts-options-api-provide-inject-limitations](reference/ts-options-api-provide-inject-limitations.md)
- Complex computed properties lack clear type documentation → See [ts-options-api-computed-return-types](reference/ts-options-api-computed-return-types.md)

### Methods & Lifecycle
- Methods aren't binding to component instance context → See [no-arrow-functions-in-methods](reference/no-arrow-functions-in-methods.md)
- Lifecycle hooks losing access to component data → See [no-arrow-functions-in-lifecycle-hooks](reference/no-arrow-functions-in-lifecycle-hooks.md)
- Debounced functions sharing state across component instances → See [stateful-methods-lifecycle](reference/stateful-methods-lifecycle.md)

© github.com/vuejs-ai · MIT · vuejs-ai/skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor