vue

Skill do integracji z Claude, Codex lub Copilot, który dostarcza pełną wiedzę o Vue 3 Composition API. Obejmuje macra script setup (defineProps, defineEmits, defineModel), system reaktywności (ref, computed, watch), komponenty wbudowane (Transition, Teleport, Suspense, KeepAlive) i best practices dla Single File Components. Opiera się na Vue 3.5 i zawsze preferuje TypeScript oraz nowoczesne podejście Composition API zamiast przestarzałego Options API.

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.