vue-best-practices

MUST be used for Vue.js tasks. Strongly recommends Composition API with u003cscript setupu003e and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

1. Załaduj umiejętność vue-best-practices w swoim środowisku Claude/Copilot/Codex przed pracą nad projektem Vue.js. Aktywuj ją dla dowolnych zadań związanych z plikami .vue, konfiguracją Vue Router, Pinia lub Vite z Vue.

2. Kiedy pracujesz nad komponentem lub logiką Vue, umiejętność automatycznie sugeruje użycie Composition API z <script setup> i TypeScript jako standardowego podejścia. Jeśli projekt jawnie wymaga Options API, poinformuj umiejętność – w przeciwnym razie będzie kierować Cię ku Composition API.

3. Zwróć uwagę na ostrzeżenia dotyczące reaktywności: dostęp do wartości ref() bez .value w skryptach, destrukturyzacja reactive() tracąca reaktywność, mieszanie ref() i reactive() bez jasnego powodu, oraz używanie ref() wewnątrz tablic bez rozpakowywania.

4. Gdy pracujesz z dużymi obiektami lub bibliotekami zewnętrznymi, umiejętność podpowie użycie shallowRef() zamiast zwykłego ref() dla poprawy wydajności, oraz markRaw() dla instancji bibliotek, które nie powinny być reaktywne.

5. Dla logiki pochodnej stanu preferuj computed() zamiast watchEffect() – umiejętność będzie przypominać o tym rozróżnieniu. Pamiętaj o batching zmian reaktywnych w tym samym ticku i prawidłowym użyciu watchers.

6. Korzystaj z umiejętności jako przewodnika przez integrację zewnętrznych bibliotek zarządzania stanem, obsługę SSR, oraz konfigurację narzędzi takich jak Volar i vue-tsc dla lepszego wsparcia typu w projekcie.