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: 部署上线

完成开发后进行部署和监控。

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Application API.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/application.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Built-in Components.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/built-in-components.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Built-in Directives.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/built-in-directives.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Special Attributes.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/built-in-special-attributes.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Special Elements.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/built-in-special-elements.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Compile-Time Flags.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/compile-time-flags.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Component Instance.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/component-instance.html

defineProps() / defineEmits() / defineExpose()

API Reference

Component definition macros for props, emits, and exposed properties.

defineProps():

function defineProps<T>(): Props<T>
function defineProps<T>(props: T): Props<T>

defineEmits():

function defineEmits<T>(): Emits<T>
function defineEmits<T>(emits: T): Emits<T>

defineExpose():

function defineExpose(exposed: Record<string, any>): void

Example:

import { defineProps, defineEmits, defineExpose } from 'vue'

const props = defineProps({
  title: String
})

const emit = defineEmits(['update'])

defineExpose({
  someMethod() {
    // ...
  }
})

See also:

• examples/components-in-depth/props.md
• examples/components-in-depth/events.md

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Dependency Injection.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/composition-api-dependency-injection.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Helpers.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/composition-api-helpers.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Lifecycle Hooks.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/composition-api-lifecycle.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for setup().
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/composition-api-setup.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Custom Elements.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/custom-elements.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Custom Renderer.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/custom-renderer.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for General API.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/general.html

Lifecycle Hooks

API Reference

Component lifecycle hooks in Composition API.

Available Hooks:

• onBeforeMount() - Called before component is mounted
• onMounted() - Called after component is mounted
• onBeforeUpdate() - Called before component updates
• onUpdated() - Called after component updates
• onBeforeUnmount() - Called before component is unmounted
• onUnmounted() - Called after component is unmounted

Signature:

function onMounted(hook: () => void): void

Example:

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('Component mounted')
  // Good for: API calls, DOM manipulation
})

onUnmounted(() => {
  console.log('Component unmounted')
  // Good for: cleanup (timers, subscriptions)
})

See also: examples/essentials/lifecycle.md

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Options: Composition.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/options-composition.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Options: Lifecycle.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/options-lifecycle.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Options: Misc.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/options-misc.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Options: Rendering.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/options-rendering.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Options: State.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/options-state.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Reactivity: Advanced.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/reactivity-advanced.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Reactivity: Core.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/reactivity-core.html

computed()

API Reference

Creates a computed property that is cached and only re-evaluates when dependencies change.

Signature:

// Read-only
function computed<T>(
  getter: () => T
): Readonly<Ref<T>>

// Writable
function computed<T>(
  options: {
    get: () => T
    set: (value: T) => void
  }
): Ref<T>

Details:

• Computed properties are cached
• Only re-evaluate when reactive dependencies change
• Read-only by default
• Can have getter and setter for writable computed

Example:

import { ref, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

See also: examples/essentials/computed-properties.md

reactive()

API Reference

Creates a reactive proxy of an object.

Signature:

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

Details:

• Returns a reactive proxy of the object
• The conversion is "deep" - it affects all nested properties
• Only works with objects (arrays and objects)
• Cannot be reassigned (unlike ref())

Example:

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  nested: {
    value: 1
  }
})

state.count++
state.nested.value++

See also: examples/essentials/reactivity-fundamentals.md

ref()

API Reference

Creates a reactive reference for a single value.

Signature:

function ref<T>(value: T): Ref<UnwrapRef<T>>

Details:

• Returns a reactive and mutable ref object
• The ref object has a single property .value that points to the inner value
• In templates, refs are automatically unwrapped (no .value needed)
• In script, use .value to access/modify the value

Example:

import { ref } from 'vue'

const count = ref(0)
console.log(count.value)  // 0

count.value++
console.log(count.value)  // 1

See also: examples/essentials/reactivity-fundamentals.md

watch()

API Reference

Watches a reactive source and invokes a callback when it changes.

Signature:

function watch<T>(
  source: WatchSource<T>,
  callback: WatchCallback<T>,
  options?: WatchOptions
): StopHandle

Details:

• Watches a single or multiple reactive sources
• Lazy by default (doesn't run immediately)
• Options: immediate, deep, flush
• Returns a stop function

Example:

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log(`Count: ${oldVal} -> ${newVal}`)
})

See also: examples/essentials/watchers.md

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Reactivity: Utilities.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/reactivity-utilities.html

toRef() / toRefs()

API Reference

Creates a ref for a property on a reactive object, or converts a reactive object to a plain object with refs.

Signature:

function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K
): ToRef<T[K]>

function toRefs<T extends object>(
  object: T
): ToRefs<T>

Details:

• toRef() creates a ref for a single property
• toRefs() converts all properties to refs
• Useful when destructuring reactive objects
• Maintains reactivity after destructuring

Example:

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue'
})

const { count, name } = toRefs(state)
// Both are refs, maintaining reactivity

See also: examples/essentials/reactivity-fundamentals.md

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Render Function.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/render-function.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for SFC CSS Features.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/sfc-css-features.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for SFC <script setup>.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/sfc-script-setup.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for SFC Syntax Specification.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/sfc-spec.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for Server-Side Rendering.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/ssr.html

Instructions

• Use this API reference page to confirm signatures, parameters, and return values for TypeScript Utility Types.
• Cross-check examples in the guide when applying the API.
• Link to the official docs if clarification is required.

Reference: https://cn.vuejs.org/api/utility-types.html

Instructions

• Use semantic HTML elements.
• Provide labels for form inputs.
• Ensure keyboard navigation works.

Reference: https://cn.vuejs.org/guide/best-practices/accessibility.html

Instructions

• Avoid unnecessary reactivity.
• Lazy-load heavy components and routes.
• Use v-memo or v-once when applicable.

Reference: https://cn.vuejs.org/guide/best-practices/performance.html

Instructions

• Use Vite build for production bundles.
• Set correct base path for deployment.
• Enable caching for static assets.

Notes

• Use vite build and serve dist/.

Reference: https://cn.vuejs.org/guide/best-practices/production-deployment.html

Instructions

• Avoid using v-html with untrusted content.
• Sanitize user input before rendering.
• Keep dependencies updated.

Reference: https://cn.vuejs.org/guide/best-practices/security.html

Instructions

• Cache component instances with <KeepAlive>.
• Use include/exclude to control caching.
• Use activated/deactivated hooks when needed.

Example

<template>
  <KeepAlive>
    <component :is="currentView" />
  </KeepAlive>
</template>

Reference: https://cn.vuejs.org/guide/built-ins/keep-alive.html

Instructions

• Use <Suspense> for async dependencies.
• Provide default and fallback slots.
• Combine with async components.

Example

<template>
  <Suspense>
    <template #default>
      <AsyncView />
    </template>
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

Reference: https://cn.vuejs.org/guide/built-ins/suspense.html

Instructions

• Render content to a different DOM container.
• Use Teleport for modals or overlays.
• Keep target container present in DOM.

Example

<template>
  <Teleport to="body">
    <div class="modal">Modal</div>
  </Teleport>
</template>

Reference: https://cn.vuejs.org/guide/built-ins/teleport.html

Instructions

• Use <TransitionGroup> for list transitions.
• Always provide keys for list items.
• Define move class for FLIP animations.

Example

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </TransitionGroup>
</template>

Reference: https://cn.vuejs.org/guide/built-ins/transition-group.html

Instructions

• Use <Transition> for entering/leaving elements.
• Define transition classes in CSS.
• Prefer CSS transitions for simple cases.

Example

<template>
  <Transition name="fade">
    <p v-if="show">Hello</p>
  </Transition>
</template>

Reference: https://cn.vuejs.org/guide/built-ins/transition.html

Instructions

• Use defineAsyncComponent for lazy loading.
• Provide loading and error states.
• Set timeout for slow loads.

Example

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncCard = defineAsyncComponent(() => import('./Card.vue'))
</script>

<template>
  <AsyncCard />
</template>

Reference: https://cn.vuejs.org/guide/components/async.html

Instructions

• Use $attrs to pass through attributes.
• Control inheritAttrs when necessary.
• Avoid leaking unintended attributes.

Example

<script setup>
defineOptions({ inheritAttrs: false })
</script>

<template>
  <button v-bind="$attrs">Button</button>
</template>

Reference: https://cn.vuejs.org/guide/components/attrs.html

Instructions

• Emit events to communicate upward.
• Document event names and payloads.
• Prefer kebab-case event names.

Example

<script setup>
const emit = defineEmits(['save'])

// Emit a save event
function handleClick() {
  emit('save')
}
</script>

<template>
  <button @click="handleClick">Save</button>
</template>

Reference: https://cn.vuejs.org/guide/components/events.html

Instructions

• Define props with types and defaults.
• Treat props as read-only.
• Validate inputs when needed.

Example

<script setup>
const props = defineProps({
  title: { type: String, required: true }
})
</script>

<template>
  <h3>{{ props.title }}</h3>
</template>

Reference: https://cn.vuejs.org/guide/components/props.html

Instructions

• Provide values at ancestor components.
• Inject in descendants without prop drilling.
• Use symbols or strings as keys.

Example

<script setup>
import { provide } from 'vue'

// Provide a theme value
provide('theme', 'dark')
</script>

Reference: https://cn.vuejs.org/guide/components/provide-inject.html

Instructions

• Register components globally or locally.
• Prefer local registration for tree-shaking.
• Use PascalCase for component names.

Example

<script setup>
import BaseButton from './BaseButton.vue'
</script>

<template>
  <BaseButton />
</template>

Reference: https://cn.vuejs.org/guide/components/registration.html

Instructions

• Use slots for content distribution.
• Use named slots for multiple regions.
• Use scoped slots to expose data.

Example

<template>
  <header><slot name="header" /></header>
  <main><slot /></main>
</template>

Reference: https://cn.vuejs.org/guide/components/slots.html

Instructions

• Use modelValue and update:modelValue for v-model.
• Support multiple v-model bindings when needed.
• Keep inputs controlled by props.

Example

<script setup>
const props = defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])

// Update model value
function onInput(event) {
  emit('update:modelValue', event.target.value)
}
</script>

<template>
  <input :value="props.modelValue" @input="onInput" />
</template>

Reference: https://cn.vuejs.org/guide/components/v-model.html

Instructions

• Create the Vue app instance with createApp().
• Mount to a root element in the DOM.
• Register plugins or global components before mount.

Example

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

Reference: https://cn.vuejs.org/guide/essentials/application.html

Instructions

• Bind class and style with object or array syntax.
• Use computed for complex class logic.
• Prefer inline style bindings for dynamic style values.

Example

<script setup>
import { ref, computed } from 'vue'

const isActive = ref(true)
const classes = computed(() => ({ active: isActive.value }))
</script>

<template>
  <div :class="classes" :style="{ color: isActive ? 'green' : 'gray' }">Text</div>
</template>

Reference: https://cn.vuejs.org/guide/essentials/class-and-style.html

Instructions

• Define components and pass props.
• Use emits for child-to-parent communication.
• Keep components single-purpose.

Example

<script setup>
import ChildCard from './ChildCard.vue'

// Handle child save event
function handleSave() {
  // no-op
}
</script>

<template>
  <ChildCard title="Card" @save="handleSave" />
</template>

Reference: https://cn.vuejs.org/guide/essentials/component-basics.html

Instructions

• Use computed() for derived state.
• Computed values are cached by dependency.
• Prefer computed over methods for repeated derivations.

Example

<script setup>
import { ref, computed } from 'vue'

const count = ref(2)
const double = computed(() => count.value * 2)
</script>

<template>
  <p>double: {{ double }}</p>
</template>

Reference: https://cn.vuejs.org/guide/essentials/computed.html

Instructions

• Use v-if / v-else-if / v-else for conditional blocks.
• Use v-show for frequent toggling.
• Keep conditions simple and readable.

Example

<script setup>
import { ref } from 'vue'

const visible = ref(true)
</script>

<template>
  <p v-if="visible">Shown</p>
  <p v-else>Hidden</p>
</template>

Reference: https://cn.vuejs.org/guide/essentials/conditional.html

Instructions

• Use @ for event binding.
• Use event modifiers to prevent or stop events.
• Keep handlers concise and focused.

Example

<script setup>
import { ref } from 'vue'

const count = ref(0)

// Handle click events
function increment() {
  count.value += 1
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

Reference: https://cn.vuejs.org/guide/essentials/event-handling.html

Instructions

• Use v-model for two-way binding.
• Pair v-model with correct input types.
• Normalize values in script when needed.

Example

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <input v-model="text" />
  <p>{{ text }}</p>
</template>

Reference: https://cn.vuejs.org/guide/essentials/forms.html

Instructions

• Use lifecycle hooks for side effects.
• Keep mount/unmount logic paired.
• Avoid heavy work in render.

Example

<script setup>
import { onMounted, onUnmounted } from 'vue'

// Initialize on mount
onMounted(() => {
  console.log('mounted')
})

// Cleanup on unmount
onUnmounted(() => {
  console.log('unmounted')
})
</script>

Reference: https://cn.vuejs.org/guide/essentials/lifecycle.html

Instructions

• Use v-for to render arrays and objects.
• Always provide a stable :key.
• Avoid using array index as key when possible.

Example

<script setup>
import { ref } from 'vue'

const items = ref([{ id: 1, name: 'A' }, { id: 2, name: 'B' }])
</script>

<template>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</template>

Reference: https://cn.vuejs.org/guide/essentials/list.html

Instructions

• Use ref() for primitives and reactive() for objects.
• Access ref values with .value in script.
• Let Vue track dependencies automatically.

Example

<script setup>
import { ref, reactive } from 'vue'

const count = ref(0)
const user = reactive({ name: 'Vue' })

// Update reactive state
function increment() {
  count.value += 1
}
</script>

<template>
  <p>{{ user.name }}: {{ count }}</p>
  <button @click="increment">+1</button>
</template>

Reference: https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html

Instructions

• Use ref() with template refs for DOM access.
• Access refs after mount.
• Prefer refs over direct DOM queries.

Example

<script setup>
import { ref, onMounted } from 'vue'

const inputRef = ref(null)

// Focus input after mount
onMounted(() => {
  inputRef.value?.focus()
})
</script>

<template>
  <input ref="inputRef" />
</template>

Reference: https://cn.vuejs.org/guide/essentials/template-refs.html

Instructions

• Use interpolation for text output.
• Use v-bind and v-on (or shorthands) for bindings and events.
• Use directives for conditional and list rendering.

Example

<script setup>
import { ref } from 'vue'

const count = ref(0)
const label = ref('Increment')

// Handle button click
function increment() {
  count.value += 1
}
</script>

<template>
  <button :title="label" @click="increment">{{ count }}</button>
</template>

Reference: https://cn.vuejs.org/guide/essentials/template-syntax.html

Instructions

• Use watch() for side effects.
• Use watchEffect() for automatic dependency tracking.
• Use the immediate option when needed.

Example

<script setup>
import { ref, watch } from 'vue'

const count = ref(0)

// Watch changes to count
watch(count, (value) => {
  console.log('count changed:', value)
})
</script>

Reference: https://cn.vuejs.org/guide/essentials/watchers.html

Instructions

• Use CSS transitions for simple animations.
• Use JS hooks for complex animations.
• Prefer <Transition> and <TransitionGroup>.

Reference: https://cn.vuejs.org/guide/extras/animation.html

Instructions

• Answer common Composition API questions.
• Clarify refs vs reactive and setup usage.
• Recommend <script setup> for new projects.

Reference: https://cn.vuejs.org/guide/extras/composition-api-faq.html

Instructions

• Understand reactive tracking and triggering.
• Avoid mutating raw objects when needed.
• Use toRaw or markRaw when appropriate.

Reference: https://cn.vuejs.org/guide/extras/reactivity-in-depth.html

Instructions

• Use render functions for advanced cases.
• Prefer templates when possible.
• Use JSX with proper tooling.

Example

import { h } from 'vue'

export default {
  render() {
    return h('div', 'Hello')
  }
}

Reference: https://cn.vuejs.org/guide/extras/render-function.html

Instructions

• Understand virtual DOM rendering flow.
• Use template compilation for performance.
• Avoid heavy work in render.

Reference: https://cn.vuejs.org/guide/extras/rendering-mechanism.html

Instructions

• Choose between CDN, Vite, or framework integrations.
• Use CDN for quick prototypes.
• Use Vite for production apps.

Reference: https://cn.vuejs.org/guide/extras/ways-of-using-vue.html

Instructions

• Use defineCustomElement for custom elements.
• Expose props and events.
• Bundle for distribution.

Reference: https://cn.vuejs.org/guide/extras/web-components.html

Instructions

• Explain Vue 3 as a progressive framework for building UIs.
• Clarify when to adopt Vue incrementally vs. SPA.
• Point users to the guide sections that match their task.

Example

<script setup>
import { ref } from 'vue'

const message = ref('Hello Vue 3')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

Reference: https://cn.vuejs.org/guide/introduction.html

Instructions

• Use the official project scaffolding to create a Vue 3 app.
• Start the dev server and confirm the app runs.
• Use npm or pnpm commands exactly as shown in the guide.

Example

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

Reference: https://cn.vuejs.org/guide/quick-start.html

Instructions

• Encapsulate reusable stateful logic.
• Return refs and functions from composables.
• Keep composables focused.

Example

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)

  // Increment count
  function inc() {
    count.value += 1
  }

  return { count, inc }
}

Reference: https://cn.vuejs.org/guide/reusability/composables.html

Instructions

• Use directives for low-level DOM access.
• Define directive hooks on mount/update.
• Keep directives small and focused.

Example

export const vFocus = {
  mounted(el: HTMLElement) {
    el.focus()
  }
}

Reference: https://cn.vuejs.org/guide/reusability/custom-directives.html

Instructions

• Expose install(app) on plugins.
• Register global components or provide values.
• Keep plugin APIs stable.

Example

import type { App } from 'vue'

export default {
  install(app: App) {
    app.provide('apiBase', '/api')
  }
}

Reference: https://cn.vuejs.org/guide/reusability/plugins.html

Instructions

• Use Vue Router for SPA routing.
• Define routes and connect to router-view.
• Use lazy-loaded routes for performance.

Example

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/', component: () => import('./Home.vue') }]
})

export default router

Reference: https://cn.vuejs.org/guide/scaling-up/routing.html

Instructions

• Use .vue files to co-locate template, script, and style.
• Prefer <script setup> for Composition API.
• Use scoped styles when appropriate.

Example

<script setup>
const title = 'SFC'
</script>

<template>
  <h1>{{ title }}</h1>
</template>

<style scoped>
 h1 { color: #42b883; }
</style>

Reference: https://cn.vuejs.org/guide/scaling-up/sfc.html

Instructions

• Use SSR for faster first paint and SEO.
• Ensure code runs in both server and client.
• Avoid direct DOM access on server.

Notes

• Consider Nuxt for production SSR.

Reference: https://cn.vuejs.org/guide/scaling-up/ssr.html

Instructions

• Use Pinia for global state management.
• Keep stores modular and feature-based.
• Avoid overusing global state.

Example

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 })
})

Reference: https://cn.vuejs.org/guide/scaling-up/state-management.html

Instructions

• Use Vitest for unit tests.
• Use Vue Test Utils for component testing.
• Test user flows and edge cases.

Notes

• Prefer testing behavior over implementation.

Reference: https://cn.vuejs.org/guide/scaling-up/testing.html

Instructions

• Use Vite for dev server and build.
• Use TypeScript and ESLint for large apps.
• Use Vue DevTools for debugging.

Notes

• Recommended bundler: Vite
• Use Vue DevTools for component inspection
• Use ESLint + Prettier for code quality

Reference: https://cn.vuejs.org/guide/scaling-up/tooling.html

Instructions

• Type refs and reactive objects explicitly.
• Use interfaces for structured data.
• Use return types for composables.

Example

import { ref } from 'vue'

const count = ref<number>(0)

Reference: https://cn.vuejs.org/guide/typescript/composition-api.html

Instructions

• Use defineComponent for Options API typing.
• Type props and data explicitly.
• Use this typing carefully.

Example

import { defineComponent } from 'vue'

export default defineComponent({
  props: { title: { type: String, required: true } }
})

Reference: https://cn.vuejs.org/guide/typescript/options-api.html

Instructions

• Use TypeScript for type safety.
• Enable TS in Vite scaffolding.
• Use defineProps and defineEmits with types.

Example

<script setup lang="ts">
interface Props {
  title: string
}

const props = defineProps<Props>()
</script>

<template>
  <h1>{{ props.title }}</h1>
</template>

Reference: https://cn.vuejs.org/guide/typescript/overview.html

Vue 3 Project Structure Template

Standard Project Structure

my-vue-app/
├── public/                 # Static assets
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/            # Imported assets (images, styles)
│   │   ├── logo.png
│   │   └── main.css
│   ├── components/        # Reusable components
│   │   ├── common/        # Common UI components
│   │   │   ├── Button.vue
│   │   │   ├── Input.vue
│   │   │   └── Modal.vue
│   │   └── layout/        # Layout components
│   │       ├── Header.vue
│   │       ├── Footer.vue
│   │       └── Sidebar.vue
│   ├── views/            # Page components
│   │   ├── Home.vue
│   │   ├── About.vue
│   │   └── User/
│   │       ├── UserList.vue
│   │       └── UserDetail.vue
│   ├── router/            # Vue Router configuration
│   │   └── index.js
│   ├── stores/            # Pinia stores
│   │   ├── index.js
│   │   ├── user.js
│   │   └── counter.js
│   ├── composables/       # Composition functions
│   │   ├── useCounter.js
│   │   ├── useFetch.js
│   │   └── useLocalStorage.js
│   ├── utils/             # Utility functions
│   │   ├── helpers.js
│   │   └── constants.js
│   ├── api/               # API calls
│   │   ├── index.js
│   │   ├── user.js
│   │   └── product.js
│   ├── App.vue            # Root component
│   └── main.js            # Application entry point
├── .env                   # Environment variables
├── .env.local            # Local environment variables
├── .gitignore
├── package.json
├── vite.config.js        # Vite configuration
└── README.md

Component Template

<script setup>
// 1. Imports
import { ref, computed, watch, onMounted } from 'vue'
import MyComponent from './MyComponent.vue'

// 2. Props & Emits
const props = defineProps({
  title: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['update', 'delete'])

// 3. Reactive state
const count = ref(0)
const message = ref('Hello')

// 4. Computed properties
const doubleCount = computed(() => count.value * 2)

// 5. Watchers
watch(count, (newVal, oldVal) => {
  console.log(`Count changed: ${oldVal} -> ${newVal}`)
})

// 6. Lifecycle hooks
onMounted(() => {
  console.log('Component mounted')
})

// 7. Methods
function handleClick() {
  count.value++
  emit('update', count.value)
}
</script>

<template>
  <div class="component">
    <h2>{{ props.title }}</h2>
    <p>{{ message }}</p>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<style scoped>
.component {
  padding: 20px;
}
</style>

TypeScript Component Template

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

interface Props {
  title: string
  count?: number
}

const props = withDefaults(defineProps<Props>(), {
  count: 0
})

interface Emits {
  (e: 'update', value: number): void
}

const emit = defineEmits<Emits>()

const localCount = ref(props.count)

function increment() {
  localCount.value++
  emit('update', localCount.value)
}
</script>

<template>
  <div>
    <h2>{{ props.title }}</h2>
    <p>Count: {{ localCount }}</p>
    <button @click="increment">+</button>
  </div>
</template>

Composable Template

// composables/useExample.js
import { ref, computed, onMounted, onUnmounted } from 'vue'

export function useExample(initialValue = 0) {
  // State
  const value = ref(initialValue)
  
  // Computed
  const doubleValue = computed(() => value.value * 2)
  
  // Methods
  function increment() {
    value.value++
  }
  
  function decrement() {
    value.value--
  }
  
  function reset() {
    value.value = initialValue
  }
  
  // Lifecycle
  onMounted(() => {
    console.log('Composable mounted')
  })
  
  onUnmounted(() => {
    console.log('Composable unmounted')
    // Cleanup logic here
  })
  
  // Return public API
  return {
    value,
    doubleValue,
    increment,
    decrement,
    reset
  }
}

Store Template

// stores/example.js
import { defineStore } from 'pinia'

export const useExampleStore = defineStore('example', {
  state: () => ({
    items: [],
    loading: false,
    error: null
  }),
  
  getters: {
    itemCount: (state) => state.items.length,
    hasItems: (state) => state.items.length > 0
  },
  
  actions: {
    async fetchItems() {
      this.loading = true
      this.error = null
      try {
        const response = await fetch('/api/items')
        this.items = await response.json()
      } catch (error) {
        this.error = error.message
      } finally {
        this.loading = false
      }
    },
    
    addItem(item) {
      this.items.push(item)
    },
    
    removeItem(id) {
      this.items = this.items.filter(item => item.id !== id)
    }
  }
})

Router Template

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Main.js Template

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(router)
app.mount('#app')

Vite Config Template

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 3000,
    open: true
  }
})