vue

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Vue 3 Development

Vue 3 开发

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.

Vue 3 Composition API模式、组件架构及测试实践参考指南。

当前稳定版本： Vue 3.5+，具备增强的响应式性能（内存占用减少56%，数组追踪速度提升10倍）、全新SSR功能以及优化的开发者体验。

Overview

概述

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).

Vue 3项目的渐进式参考体系。仅加载与当前任务相关的文件，以最小化上下文占用（基础约250个token，每个子文件500-1500个token）。

When to Use

使用场景

Use this skill when:

Writing
```
.vue
```
components
Creating composables (
```
use*
```
functions)
Building client-side utilities
Testing Vue components/composables

Use
nuxt
skill instead for:

Server routes, API endpoints
File-based routing, middleware
Nuxt-specific patterns

For styled UI components: use

nuxt-ui

skill For headless accessible components: use

reka-ui

skill For VueUse composables: use

vueuse

skill

在以下场景使用本技能：

编写.vue组件
创建组合式函数（
```
use*
```
函数）
构建客户端工具
测试Vue组件/组合式函数

以下场景请使用
nuxt
技能替代：

服务端路由、API端点
基于文件的路由、中间件
Nuxt专属模式

如需开发样式化UI组件： 使用

nuxt-ui

技能 如需开发无头可访问组件： 使用

reka-ui

技能 如需使用VueUse组合式函数： 使用

vueuse

技能

Quick Reference

快速参考

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
Reactivity (ref, watch)	references/reactivity.md
Custom directives	references/directives.md
Provide/inject	references/provide-inject.md
Edge cases, vue-tsc	references/gotchas.md

处理内容...	加载文件
`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

Loading Files

文件加载

Consider loading these reference files based on your task:

references/components.md - if working in
```
components/
```
or writing
```
.vue
```
files
references/composables.md - if creating composables (
```
use*
```
functions)
references/utils-client.md - if working in
```
utils/
```
or writing client utilities
references/testing.md - if writing
```
.spec.ts
```
or
```
.test.ts
```
files
references/typescript.md - if working with Vue TypeScript patterns or generics
references/router.md - if working with Vue Router or route typing
references/reactivity.md - if using ref, reactive, computed, watch, or watchEffect
references/directives.md - if creating or using custom directives
references/provide-inject.md - if using provide/inject patterns
references/gotchas.md - if debugging edge cases or hydration issues

DO NOT load all files at once. Load only what's relevant to your current task.

根据当前任务考虑加载以下参考文件：

references/components.md - 若处理
```
components/
```
目录下的内容或编写.vue文件
references/composables.md - 若创建组合式函数（
```
use*
```
函数）
references/utils-client.md - 若处理
```
utils/
```
目录下的内容或编写客户端工具
references/testing.md - 若编写
```
.spec.ts
```
或
```
.test.ts
```
文件
references/typescript.md - 若使用Vue TypeScript模式或泛型
references/router.md - 若使用Vue Router或路由类型定义
references/reactivity.md - 若使用ref、reactive、computed、watch或watchEffect
references/directives.md - 若创建或使用自定义指令
references/provide-inject.md - 若使用provide/inject模式
references/gotchas.md - 若调试边缘情况或 hydration 问题

请勿一次性加载所有文件。 仅加载与当前任务相关的文件。

Available Guidance

可用指南

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)

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边缘情况、hydration问题、竞态条件（来自vuejs-ai/skills）