AgentSkillsCN

vue

Vue.js是一个渐进式JavaScript框架。适用于Vue组件的构建、响应式编程（ref、reactive、computed、watch）的使用，或Vue Composition API模式的实现。

SKILL.md
--- frontmatter
name: vue
description: Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns.
metadata:
  author: Anthony Fu
  version: "2026.1.28"
  source: Generated from https://github.com/vuejs/docs, scripts located at https://github.com/antfu/skills

Vue

The skill is based on Vue 3.5+, generated at 2026-01-28.

Vue is a progressive JavaScript framework for building user interfaces. It builds on standard HTML, CSS, and JavaScript with intuitive API and world-class documentation. The Composition API with <script setup> and TypeScript is the recommended approach for building Vue applications.

Core References

TopicDescriptionReference
Reactivity Systemref, reactive, computed, watch, and watchEffectcore-reactivity

Components

TopicDescriptionReference
PropsDeclare and validate component props with TypeScriptcomponents-props
Events (Emits)Emit custom events from componentscomponents-emits
SlotsPass template content to child componentscomponents-slots
v-modelTwo-way binding on custom componentscomponents-v-model
Lifecycle HooksRun code at specific component lifecycle stagescomponents-lifecycle

Features

Script Setup & TypeScript

TopicDescriptionReference
Script SetupComposition API syntactic sugar for SFCsfeatures-script-setup
TypeScriptType-safe Vue components with Composition APIfeatures-typescript

Reusability

TopicDescriptionReference
ComposablesEncapsulate and reuse stateful logicfeatures-composables
Custom DirectivesLow-level DOM manipulation directivesfeatures-directives
Template RefsDirect DOM and component instance accessfeatures-template-refs

Advanced

TopicDescriptionReference
Provide/InjectDependency injection across component treeadvanced-provide-inject
Async & SuspenseTop-level await pitfalls, async components, Suspenseadvanced-async-suspense

Key Recommendations

  • •Use <script setup lang="ts"> for all components
  • •Prefer ref() over reactive() for declaring state
  • •Use type-based prop declarations with interfaces
  • •Use defineModel() for v-model (3.4+)
  • •Destructure props reactively (3.5+) for cleaner code
  • •Extract composables for reusable stateful logic