Vue 开发技能合集
为 Vue 3 应用开发提供组件、路由、状态管理、测试和调试指导。
这套由 vuejs-ai 社区维护的合集包含八个技能，覆盖 Vue 3 的 Composition API 与 TypeScript、Options API、Vue Router、Pinia、测试、JSX、调试和可复用组合式函数。上游项目仍处于早期实验阶段，使用时应结合项目实际情况和已安装版本核验建议。
适用场景
- 编写 Vue 3 组件和可复用组合式函数
- 配置路由导航和 Pinia 状态管理
- 编写组件测试和端到端测试
- 排查运行时错误和水合问题
使用方法
安装合集后，说明项目的 Vue 版本、API 风格和具体任务。作者建议以 use vue skill 开始提示词，再按开发、测试或调试任务选用对应技能，并在项目中验证结果。
Skills
create-adaptable-composable
Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.
vuejs-ai/skillsvue-best-practices
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
vuejs-ai/skillsvue-debug-guides
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.
vuejs-ai/skillsvue-jsx-best-practices
JSX syntax in Vue (e.g., class vs className, JSX plugin config).
vuejs-ai/skillsvue-options-api-best-practices
Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.
vuejs-ai/skillsvue-pinia-best-practices
Pinia stores, state management patterns, store setup, and reactivity with stores.
vuejs-ai/skillsvue-router-best-practices
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
vuejs-ai/skillsvue-testing-best-practices
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
vuejs-ai/skills