vue-options-api-best-practices
Vue 3 Options API style guide and type-safety.
Install
mkdir -p .claude/skills/vue-options-api-best-practices && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1580" && unzip -o skill.zip -d .claude/skills/vue-options-api-best-practices && rm skill.zipInstalls to .claude/skills/vue-options-api-best-practices
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.Key capabilities
- →Implement Vue 3 Options API patterns
- →Configure TypeScript type inference
- →Manage component instance context
- →Apply lifecycle hook best practices
How it works
It provides reference patterns for Vue 3 Options API development, focusing on correct 'this' context binding and TypeScript integration.
Inputs & outputs
When to use vue-options-api-best-practices
- →Refactor to Options API
- →Implement type-safe methods
- →Fix lifecycle hook context
About this skill
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
- Enabling type safety for Options API this context → See ts-strict-mode-options-api
- Using old TypeScript versions with prop validators → See ts-options-api-arrow-functions-validators
- Event handler parameters need proper type safety → See ts-options-api-type-event-handlers
- Need to type object or array props with interfaces → See ts-options-api-proptype-complex-types
- Injected properties missing TypeScript types completely → See ts-options-api-provide-inject-limitations
- Complex computed properties lack clear type documentation → See ts-options-api-computed-return-types
Methods & Lifecycle
- Methods aren't binding to component instance context → See no-arrow-functions-in-methods
- Lifecycle hooks losing access to component data → See no-arrow-functions-in-lifecycle-hooks
- Debounced functions sharing state across component instances → See stateful-methods-lifecycle
When not to use it
- →Projects using Composition API
- →Non-Vue 3 applications
Prerequisites
Limitations
- →Limited to Options API style
- →Requires specific reference documentation for complex types
How it compares
It provides specific Options API solutions, avoiding the common pitfalls of mixing Composition API patterns.
Compared to similar skills
vue-options-api-best-practices side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vue-options-api-best-practices (this skill) | 5 | 6mo | No flags | Intermediate |
| vue-pinia-best-practices | 1 | 6mo | No flags | Beginner |
| vue2-to-vue3-migration | 0 | 2mo | No flags | Intermediate |
| typescript-review | 39 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by vuejs-ai
View all by vuejs-ai →You might also like
vue-pinia-best-practices
vuejs-ai
Pinia stores, state management patterns, store setup, and reactivity with stores.
vue2-to-vue3-migration
agoodays
用于 ant-design-vue(Vue2) 到 ant-design-vue3(Vue3) 的页面、组件或模块迁移工作流。适用于单页迁移、批量迁移、迁移拆单、迁移验收、迁移风险盘点。
typescript-review
metabase
Review TypeScript and JavaScript code changes for compliance with Metabase coding standards, style violations, and code quality issues. Use when reviewing pull requests or diffs containing TypeScript/JavaScript code.
typescript
lobehub
TypeScript code style and optimization guidelines. Use when writing TypeScript code (.ts, .tsx, .mts files), reviewing code quality, or implementing type-safe patterns. Triggers on TypeScript development, type safety questions, or code style discussions.
react-patterns
davila7
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
antfu
antfu
Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects. Use when setting up new projects, configuring ESLint/Prettier alternatives, monorepos, library publishing, or when the user mentions Anthony Fu's preferences.