vue
Installation
Summary
Vue 3 Composition API with script setup, reactivity system, and built-in components for single-file components.
- Use
<script setup lang="ts">with TypeScript; leveragedefineProps,defineEmits,defineModel, and other macros for type-safe component APIs - Core reactivity includes
ref,shallowRef,computed,watch,watchEffect, and lifecycle hooks; prefershallowRefwhen deep reactivity isn't needed - Built-in components cover
Transition,Teleport,Suspense,KeepAlive, and directives likev-memofor advanced patterns - Always use Composition API over Options API; avoid reactive props destructuring to maintain reactivity
SKILL.md
Vue
Based on Vue 3.5. Always use Composition API with
<script setup lang="ts">.
Preferences
- Prefer TypeScript over JavaScript
- Prefer
<script setup lang="ts">over<script> - For performance, prefer
shallowRefoverrefif deep reactivity is not needed - Always use Composition API over Options API
- Discourage using Reactive Props Destructure
Core
| Topic | Description | Reference |
|---|---|---|
| Script Setup & Macros | <script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics |
script-setup-macros |
| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | core-new-apis |