# Vue3

> Guidance for Vue 3 using the official guide and API reference. Use when the user needs Vue 3 concepts, patterns, or API details to build components, apps, and tooling.

- Skill: `full-stack-skills/vue3` (Agent Skill, multi-file: 88 files)
- Install (CLI): `npx skillmds@latest add full-stack-skills/vue3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/full-stack-skills/vue3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Complete terms in LICENSE.txt
- Author: full-stack-skills (https://skillmd.com/u/full-stack-skills)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/full-stack-skills/vue3

---


## When to use this skill

Use this skill whenever the user wants to:
- Learn or apply Vue 3 guide topics (from Introduction to advanced extras)
- Implement Vue 3 components, reactivity, templates, and routing
- Follow Vue 3 best practices, TypeScript usage, or performance guidance
- Check Vue 3 API reference for specific functions or options

## How to use this skill

1. **Identify the topic** from the user request.
2. **Open the matching guide example** file in `examples/`.
3. **If API details are needed**, open the matching file in `api/`.
4. **Follow the official guidance** and keep outputs consistent with Vue 3 documentation.

### Guide mapping (one-to-one with Guide pages)

**Getting Started**
- `examples/getting-started/introduction.md` → https://cn.vuejs.org/guide/introduction.html
- `examples/getting-started/quick-start.md` → https://cn.vuejs.org/guide/quick-start.html

**Essentials**
- `examples/essentials/application.md` → https://cn.vuejs.org/guide/essentials/application.html
- `examples/essentials/template-syntax.md` → https://cn.vuejs.org/guide/essentials/template-syntax.html
- `examples/essentials/reactivity-fundamentals.md` → https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html
- `examples/essentials/computed.md` → https://cn.vuejs.org/guide/essentials/computed.html
- `examples/essentials/class-and-style.md` → https://cn.vuejs.org/guide/essentials/class-and-style.html
- `examples/essentials/conditional.md` → https://cn.vuejs.org/guide/essentials/conditional.html
- `examples/essentials/list.md` → https://cn.vuejs.org/guide/essentials/list.html
- `examples/essentials/event-handling.md` → https://cn.vuejs.org/guide/essentials/event-handling.html
- `examples/essentials/forms.md` → https://cn.vuejs.org/guide/essentials/forms.html
- `examples/essentials/watchers.md` → https://cn.vuejs.org/guide/essentials/watchers.html
- `examples/essentials/template-refs.md` → https://cn.vuejs.org/guide/essentials/template-refs.html
- `examples/essentials/component-basics.md` → https://cn.vuejs.org/guide/essentials/component-basics.html
- `examples/essentials/lifecycle.md` → https://cn.vuejs.org/guide/essentials/lifecycle.html

**Components In-Depth**
- `examples/components/registration.md` → https://cn.vuejs.org/guide/components/registration.html
- `examples/components/props.md` → https://cn.vuejs.org/guide/components/props.html
- `examples/components/events.md` → https://cn.vuejs.org/guide/components/events.html
- `examples/components/v-model.md` → https://cn.vuejs.org/guide/components/v-model.html
- `examples/components/attrs.md` → https://cn.vuejs.org/guide/components/attrs.html
- `examples/components/slots.md` → https://cn.vuejs.org/guide/components/slots.html
- `examples/components/provide-inject.md` → https://cn.vuejs.org/guide/components/provide-inject.html
- `examples/components/async.md` → https://cn.vuejs.org/guide/components/async.html

**Reusability**
- `examples/reusability/composables.md` → https://cn.vuejs.org/guide/reusability/composables.html
- `examples/reusability/custom-directives.md` → https://cn.vuejs.org/guide/reusability/custom-directives.html
- `examples/reusability/plugins.md` → https://cn.vuejs.org/guide/reusability/plugins.html

**Built-in Components**
- `examples/built-ins/transition.md` → https://cn.vuejs.org/guide/built-ins/transition.html
- `examples/built-ins/transition-group.md` → https://cn.vuejs.org/guide/built-ins/transition-group.html
- `examples/built-ins/keep-alive.md` → https://cn.vuejs.org/guide/built-ins/keep-alive.html
- `examples/built-ins/teleport.md` → https://cn.vuejs.org/guide/built-ins/teleport.html
- `examples/built-ins/suspense.md` → https://cn.vuejs.org/guide/built-ins/suspense.html

**Scaling Up**
- `examples/scaling-up/sfc.md` → https://cn.vuejs.org/guide/scaling-up/sfc.html
- `examples/scaling-up/tooling.md` → https://cn.vuejs.org/guide/scaling-up/tooling.html
- `examples/scaling-up/routing.md` → https://cn.vuejs.org/guide/scaling-up/routing.html
- `examples/scaling-up/state-management.md` → https://cn.vuejs.org/guide/scaling-up/state-management.html
- `examples/scaling-up/testing.md` → https://cn.vuejs.org/guide/scaling-up/testing.html
- `examples/scaling-up/ssr.md` → https://cn.vuejs.org/guide/scaling-up/ssr.html

**Best Practices**
- `examples/best-practices/production-deployment.md` → https://cn.vuejs.org/guide/best-practices/production-deployment.html
- `examples/best-practices/performance.md` → https://cn.vuejs.org/guide/best-practices/performance.html
- `examples/best-practices/accessibility.md` → https://cn.vuejs.org/guide/best-practices/accessibility.html
- `examples/best-practices/security.md` → https://cn.vuejs.org/guide/best-practices/security.html

**TypeScript**
- `examples/typescript/overview.md` → https://cn.vuejs.org/guide/typescript/overview.html
- `examples/typescript/composition-api.md` → https://cn.vuejs.org/guide/typescript/composition-api.html
- `examples/typescript/options-api.md` → https://cn.vuejs.org/guide/typescript/options-api.html

**Extra Topics**
- `examples/extras/ways-of-using-vue.md` → https://cn.vuejs.org/guide/extras/ways-of-using-vue.html
- `examples/extras/composition-api-faq.md` → https://cn.vuejs.org/guide/extras/composition-api-faq.html
- `examples/extras/reactivity-in-depth.md` → https://cn.vuejs.org/guide/extras/reactivity-in-depth.html
- `examples/extras/rendering-mechanism.md` → https://cn.vuejs.org/guide/extras/rendering-mechanism.html
- `examples/extras/render-function.md` → https://cn.vuejs.org/guide/extras/render-function.html
- `examples/extras/web-components.md` → https://cn.vuejs.org/guide/extras/web-components.html
- `examples/extras/animation.md` → https://cn.vuejs.org/guide/extras/animation.html

### API mapping (one-to-one with API pages)

**Global API**
- `api/application.md` → https://cn.vuejs.org/api/application.html
- `api/general.md` → https://cn.vuejs.org/api/general.html

**Composition API**
- `api/composition-api-setup.md` → https://cn.vuejs.org/api/composition-api-setup.html
- `api/reactivity-core.md` → https://cn.vuejs.org/api/reactivity-core.html
- `api/reactivity-utilities.md` → https://cn.vuejs.org/api/reactivity-utilities.html
- `api/reactivity-advanced.md` → https://cn.vuejs.org/api/reactivity-advanced.html
- `api/composition-api-lifecycle.md` → https://cn.vuejs.org/api/composition-api-lifecycle.html
- `api/composition-api-dependency-injection.md` → https://cn.vuejs.org/api/composition-api-dependency-injection.html
- `api/composition-api-helpers.md` → https://cn.vuejs.org/api/composition-api-helpers.html

**Options API**
- `api/options-state.md` → https://cn.vuejs.org/api/options-state.html
- `api/options-rendering.md` → https://cn.vuejs.org/api/options-rendering.html
- `api/options-lifecycle.md` → https://cn.vuejs.org/api/options-lifecycle.html
- `api/options-composition.md` → https://cn.vuejs.org/api/options-composition.html
- `api/options-misc.md` → https://cn.vuejs.org/api/options-misc.html
- `api/component-instance.md` → https://cn.vuejs.org/api/component-instance.html

**Built-ins**
- `api/built-in-directives.md` → https://cn.vuejs.org/api/built-in-directives.html
- `api/built-in-components.md` → https://cn.vuejs.org/api/built-in-components.html
- `api/built-in-special-elements.md` → https://cn.vuejs.org/api/built-in-special-elements.html
- `api/built-in-special-attributes.md` → https://cn.vuejs.org/api/built-in-special-attributes.html

**Single-File Component**
- `api/sfc-spec.md` → https://cn.vuejs.org/api/sfc-spec.html
- `api/sfc-script-setup.md` → https://cn.vuejs.org/api/sfc-script-setup.html
- `api/sfc-css-features.md` → https://cn.vuejs.org/api/sfc-css-features.html

**Advanced APIs**
- `api/custom-elements.md` → https://cn.vuejs.org/api/custom-elements.html
- `api/render-function.md` → https://cn.vuejs.org/api/render-function.html
- `api/ssr.md` → https://cn.vuejs.org/api/ssr.html
- `api/utility-types.md` → https://cn.vuejs.org/api/utility-types.html
- `api/custom-renderer.md` → https://cn.vuejs.org/api/custom-renderer.html
- `api/compile-time-flags.md` → https://cn.vuejs.org/api/compile-time-flags.html

## Resources
- Guide: https://cn.vuejs.org/guide/introduction.html
- API: https://cn.vuejs.org/api/

## Keywords
Vue 3, Vue.js, Composition API, Options API, reactivity, template syntax, components, directives, lifecycle, routing, state management, TypeScript

## 国内适配

- 支持中文文档和中文注释
- 示例代码兼容国内开发环境
- 提供中文 FAQ 和常见问题解答

## 能力边界

### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时

### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估

### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景

## 使用流程

### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。

### Step 2: 配置初始化
根据项目需求进行基础配置。

### Step 3: 核心功能使用
按照示例代码实现核心功能。

### Step 4: 测试验证
运行测试确保功能正常。

### Step 5: 部署上线
完成开发后进行部署和监控。