vue

Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.

1. Zainstaluj skill w swoim środowisku Claude, Codex lub Copilot, wskazując repozytorium https://github.com/antfu/skills/tree/main/skills/vue. Skill zostanie załadowany jako kontekst wiedzy dla asystenta AI.

2. Gdy pracujesz nad komponentem Vue, poproś asystenta o pomoc w pisaniu Single File Component (SFC). Asystent automatycznie zastosuje preferencje skill'u: TypeScript, <script setup lang="ts"> i Composition API.

3. Definiuj props, emity i modele za pomocą makr dostępnych w script setup — użyj defineProps, defineEmits i defineModel. Asystent będzie sugerować te makra zamiast tradycyjnego Options API.

4. Dla reaktywności używaj ref i computed do tworzenia reaktywnych wartości i obliczonych właściwości. Jeśli nie potrzebujesz głęboką reaktywność, skill sugeruje shallowRef dla lepszej wydajności.

5. Dodaj obserwatorów za pomocą watch i watchEffect do reagowania na zmiany danych. Skill zawiera przykłady lifecycle hooks i composables do organizacji logiki.

6. Dla zaawansowanych wzorców używaj wbudowanych komponentów takich jak Transition, Teleport, Suspense i KeepAlive. Asystent będzie znać ich API i przypadki użycia bezpośrednio z dokumentacji Vue 3.5.