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