npx skills add https://github.com/onmax/nuxt-skills --skill vueVue 3 Composition API 模式、组件架构和测试实践的参考。
当前稳定版本: Vue 3.5+,具有增强的响应式性能(内存减少 56%,数组追踪速度提升 10 倍)、新的 SSR 功能以及改进的开发者体验。
适用于 Vue 3 项目的渐进式参考系统。仅加载与当前任务相关的文件,以最小化上下文使用量(基础约 250 个 token,每个子文件 500-1500 个 token)。
在以下情况下使用此技能:
.vue 组件use* 函数)在以下情况下改用 nuxt 技能:
对于带样式的 UI 组件: 使用 nuxt-ui 技能 对于无头无障碍组件: 使用 reka-ui 技能 使用 技能
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
vueuse| 正在处理... | 加载文件 |
|---|---|
components/ 中的 .vue | references/components.md |
composables/ 中的文件 | references/composables.md |
utils/ 中的文件 | references/utils-client.md |
.spec.ts 或 .test.ts | references/testing.md |
| TypeScript 模式 | references/typescript.md |
| Vue Router 类型 | references/router.md |
| 响应式(ref, watch) | references/reactivity.md |
| 自定义指令 | references/directives.md |
| Provide/inject | references/provide-inject.md |
| 边缘情况,vue-tsc | references/gotchas.md |
请根据您的任务考虑加载以下参考文件:
components/ 中工作或编写 .vue 文件use* 函数)utils/ 中工作或编写客户端工具.spec.ts 或 .test.ts 文件请勿一次性加载所有文件。 仅加载与您当前任务相关的内容。
<script setup lang="ts">
const { count = 0 } = defineProps<{ count?: number }>()
const emit = defineEmits<{ update: [value: number] }>()
</script>
<template>
<button @click="emit('update', count + 1)">
Count: {{ count }}
</button>
</template>
references/components.md - 带响应式解构的 Props、emits 模式、用于 v-model 的 defineModel、插槽简写
references/composables.md - Composition API 结构、VueUse 集成、生命周期钩子、异步模式、响应式注意事项
references/utils-client.md - 纯函数、格式化器、验证器、转换器、何时不应使用工具函数
references/testing.md - Vitest + @vue/test-utils、组件测试、组合式函数测试、路由模拟
references/typescript.md - 用于 provide/inject 的 InjectionKey、vue-tsc 严格模板、tsconfig 设置、泛型组件
references/router.md - 路由元类型、使用 unplugin-vue-router 的类型化参数、滚动行为、导航守卫
references/reactivity.md - ref、reactive、computed、watch、watchEffect、响应式基础
references/directives.md - 自定义指令钩子、v-focus、v-click-outside、v-tooltip 模式
references/provide-inject.md - InjectionKey 类型、应用级 provide、只读模式
references/gotchas.md - 常见问题、vue-tsc 边缘情况、水合问题、竞态条件(来自 vuejs-ai/skills)
每周安装量
3.2K
代码仓库
GitHub Stars
606
首次出现
2026年1月19日
安全审计
安装于
claude-code2.3K
opencode1.4K
gemini-cli1.3K
codex1.3K
github-copilot1.3K
cursor1.2K
Reference for Vue 3 Composition API patterns, component architecture, and testing practices.
Current stable: Vue 3.5+ with enhanced reactivity performance (-56% memory, 10x faster array tracking), new SSR features, and improved developer experience.
Progressive reference system for Vue 3 projects. Load only files relevant to current task to minimize context usage (~250 tokens base, 500-1500 per sub-file).
Use this skill when:
.vue componentsuse* functions)Usenuxt skill instead for:
For styled UI components: use nuxt-ui skill For headless accessible components: use reka-ui skill For VueUse composables: use vueuse skill
| Working on... | Load file |
|---|---|
.vue in components/ | references/components.md |
File in composables/ | references/composables.md |
File in utils/ | references/utils-client.md |
.spec.ts or .test.ts | references/testing.md |
| TypeScript patterns | references/typescript.md |
| Vue Router typing | references/router.md |
Consider loading these reference files based on your task:
components/ or writing .vue filesuse* functions)utils/ or writing client utilities.spec.ts or .test.ts filesDO NOT load all files at once. Load only what's relevant to your current task.
<script setup lang="ts">
const { count = 0 } = defineProps<{ count?: number }>()
const emit = defineEmits<{ update: [value: number] }>()
</script>
<template>
<button @click="emit('update', count + 1)">
Count: {{ count }}
</button>
</template>
references/components.md - Props with reactive destructuring, emits patterns, defineModel for v-model, slots shorthand
references/composables.md - Composition API structure, VueUse integration, lifecycle hooks, async patterns, reactivity gotchas
references/utils-client.md - Pure functions, formatters, validators, transformers, when NOT to use utils
references/testing.md - Vitest + @vue/test-utils, component testing, composable testing, router mocking
references/typescript.md - InjectionKey for provide/inject, vue-tsc strict templates, tsconfig settings, generic components
references/router.md - Route meta types, typed params with unplugin-vue-router, scroll behavior, navigation guards
references/reactivity.md - ref, reactive, computed, watch, watchEffect, reactivity fundamentals
references/directives.md - Custom directive hooks, v-focus, v-click-outside, v-tooltip patterns
references/provide-inject.md - InjectionKey typing, app-level provide, readonly patterns
references/gotchas.md - Common gotchas, vue-tsc edge cases, hydration issues, race conditions (from vuejs-ai/skills)
Weekly Installs
3.2K
Repository
GitHub Stars
606
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code2.3K
opencode1.4K
gemini-cli1.3K
codex1.3K
github-copilot1.3K
cursor1.2K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
| Reactivity (ref, watch) | references/reactivity.md |
| Custom directives | references/directives.md |
| Provide/inject | references/provide-inject.md |
| Edge cases, vue-tsc | references/gotchas.md |