Wzorce rozwoju Vue.js

Wykorzystaj moc Cursor i Claude Code do rozwoju Vue.js. Te wzorce obejmują Vue 3 Composition API, zarządzanie stanem Vuex/Pinia, projektowanie komponentów i strategie testowania zoptymalizowane dla asysty AI.

Szybka konfiguracja projektów Vue

Inicjalizacja projektu Vue z AI

Cursor

1. Otwórz Cursor w katalogu projektów
2. Skonfiguruj Figma MCP w razie potrzeby: Ustawienia > MCP > Dodaj serwer > http://127.0.0.1:3845/sse
3. Aktywuj tryb Agent (Cmd/Ctrl + I)
4. Prompt: “Utwórz nowy projekt Vue 3 z TypeScript, Vite, Pinia do zarządzania stanem, Vue Router i Vitest do testowania”
5. Włącz tryb YOLO aby automatycznie uruchomić wszystkie polecenia konfiguracji
6. Przejrzyj wygenerowaną konfigurację i strukturę projektu

Claude Code

1. Przejdź do katalogu projektów i uruchom claude
2. Dodaj Figma MCP: claude mcp add figma --transport sse http://127.0.0.1:3845/sse
3. Wykonaj: “Skonfiguruj nowy projekt Vue 3 z TypeScript, Composition API, Pinia, Vue Router, Tailwind CSS i konfiguracją testową”
4. Claude uruchomi niezbędne polecenia i zbuduje projekt
5. Użyj /init aby utworzyć wytyczne specyficzne dla Vue w CLAUDE.md

Konfiguracja kontekstu AI dla Vue

Konfiguracja integracji Figma

.mcp.json

{
  "mcpServers": {
    "figma": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Utwórz zasady aby pokierować AI w rozwoju Vue:

.cursor/rules/vue-patterns.md

# Standardy rozwoju Vue.js

## Wytyczne komponentów
- Używaj Vue 3 Composition API z <script setup>
- TypeScript dla wszystkich komponentów
- Single File Components (SFC) z logicznym porządkiem: template, script, style
- Walidacja props z interfejsami TypeScript

## Zarządzanie stanem
- Pinia do zarządzania stanem globalnym
- Composables dla współdzielonej logiki
- Reactive/ref dla stanu lokalnego
- Unikaj Options API chyba że utrzymujesz legacy kod

## Strategia testowania
- Testy komponentów z @vue/test-utils
- Testy E2E z Playwright
- Testy jednostkowe composables i stores

Wzorce rozwoju komponentów

Tworzenie komponentów z projektu

Projekt do komponentu

Scenariusz: Konwertuj mockup projektu na komponent Vue

Używając serwera Figma MCP:

# PRD: Konwertuj projekty Figma na komponenty Vue
# Plan: Użyj Figma MCP dla dokładnego design-to-code

# Włącz Figma MCP w Figma Desktop
# Preferencje > Enable Dev Mode MCP Server

# Todo:
# - [ ] Wybierz komponent w Figma
# - [ ] Wygeneruj komponent Vue z tokenami projektowymi
# - [ ] Wyodrębnij zmienne do motywu
# - [ ] Utwórz warianty responsywne

Przepływ pracy Cursor z Figma MCP:

1. Wybierz komponent w Figma (serwer MCP uruchomiony)
2. Prompt: "Używając Figma MCP, wygeneruj Vue 3 SFC z wybranego projektu. Użyj <script setup>, TypeScript i Tailwind CSS"
3. Wyodrębnij tokeny: "Pobierz wszystkie zmienne projektowe z Figma i utwórz konfigurację motywu Vue"
4. Kontynuuj: "Dodaj właściwe typy props i emit events dla interakcji użytkownika"

Podejście ręczne (bez MCP):

1. Zrób zrzut ekranu lub wyeksportuj projekt
2. Przeciągnij obraz do czatu Cursor
3. Prompt: "Utwórz komponent Vue 3 używając Composition API i TypeScript na podstawie tego projektu. Użyj Tailwind CSS i zrób go responsywnym"

Wymagania funkcji

Przykład: Komponent wyszukiwania z filtrami

Utwórz komponent SearchFilter.vue z:
- Wejściem wyszukiwania w czasie rzeczywistym z debouncing
- Wieloma kategoriami filtrów (checkboxy)
- Dropdown opcji sortowania
- Wyświetlaniem liczby wyników
- Stanami ładowania i pustymi stanami
- Emit parametrów wyszukiwania przy zmianie
- Interfejsami TypeScript dla wszystkich struktur danych
- Dostępnością z etykietami ARIA

Wzorce Composition API

Niestandardowe composables:

Prompt Cursor/Claude

Utwórz composable useInfiniteScroll, który:
1. Akceptuje funkcję callback do ładowania więcej danych
2. Śledzi stany loading i error
3. Obsługuje intersection observer dla elementu wyzwalającego
4. Dostarcza informacje o paginacji (aktualna strona, hasMore)
5. Zawiera typy TypeScript
6. Dodaj kompleksowe komentarze JSDoc
7. Zawiera przykład użycia

Notatka

💡 Wskazówka: Podczas tworzenia composables poproś AI o podążanie za konwencją nazewnictwa Vue (prefiks use*) i konsekwentne zwracanie wartości reaktywnych.

Zarządzanie stanem z Pinia

Wzorzec tworzenia store

Przykład trybu Agent Cursor:

Utwórz store Pinia do zarządzania koszykiem zakupowym z:
- Interfejsami TypeScript dla Product i CartItem
- Akcjami: addItem, removeItem, updateQuantity, clearCart
- Getterami: totalPrice, itemCount, formattedCart
- Persist do localStorage
- Optymistycznymi aktualizacjami z rollback przy błędzie
- Integracją z Vue Router dla strony koszyka

Złożone wzorce stanu

1. Organizacja modułów

   Wygeneruj modularną strukturę store Pinia dla naszej aplikacji e-commerce:
   - Store użytkownika (auth, profil, preferencje)
   - Store produktów (katalog, filtry, wyszukiwanie)
   - Store koszyka (elementy, kalkulacje)
   - Store zamówień (historia, śledzenie)
   Z właściwymi typami TypeScript i komunikacją między store'ami

2. Kompozycja store’ów

   Pokaż jak komponować wiele store'ów razem dla przepływu checkout,
   dostępając do danych użytkownika, elementów koszyka i tworzenia zamówień

3. Testowanie store’ów

   Napisz testy jednostkowe dla store koszyka zawierające:
   - Dodawanie/usuwanie elementów
   - Kalkulacje cen
   - Funkcjonalność persistencji
   - Obsługę błędów

Wzorce Vue Router

Dynamiczne generowanie tras

Przepis Claude Code:

Skonfiguruj Vue Router z:
1. Zagnieżdżonymi trasami dla /products, /products/:id, /products/:id/reviews
2. Route guards dla uwierzytelniania
3. Lazy loading dla wszystkich komponentów tras
4. Generowaniem breadcrumbów z tras
5. Typami TypeScript dla parametrów tras
6. Obsługą 404 z niestandardowym komponentem

Navigation guards z AI

Implementuj przepływ uwierzytelniania w Vue Router:
- beforeEach guard sprawdzający status auth
- Przekierowanie do loginu jeśli nie uwierzytelniony
- Przechowywanie zamierzonej trasy dla przekierowania po loginie
- Wskaźnik postępu podczas zmian tras
- Obsługa asynchronicznych sprawdzeń uprawnień
- Typy TypeScript dla pól meta

Integracja systemu projektowego

Wyodrębnianie tokenów projektowych Figma

# Użyj Figma MCP aby utworzyć motyw Vue
"Używając Figma MCP get_variable_defs:
1. Wyodrębnij wszystkie zmienne kolorów z systemu projektowego
2. Pobierz tokeny typografii i odstępów
3. Wygeneruj composable Vue do zarządzania motywem"

composables/useTheme.ts

// Wygenerowany composable motywu
import { computed } from 'vue'

export const useTheme = () => {
  const colors = {
    primary: {
      base: '#1D4ED8',    // Figma: Primary/Blue
      hover: '#1E40AF',   // Figma: Primary/Blue-Dark
      light: '#3B82F6'    // Figma: Primary/Blue-Light
    },
    text: {
      primary: '#1F2937', // Figma: Text/Primary
      secondary: '#6B7280' // Figma: Text/Secondary
    }
  }

  const spacing = {
    xs: '0.5rem',  // Figma: Spacing/XS (8px)
    sm: '1rem',    // Figma: Spacing/S (16px)
    md: '1.5rem',  // Figma: Spacing/M (24px)
    lg: '2rem'     // Figma: Spacing/L (32px)
  }

  return {
    colors: computed(() => colors),
    spacing: computed(() => spacing)
  }
}

Biblioteka komponentów z Figma

# Wygeneruj bibliotekę komponentów Vue z systemu projektowego Figma
"Używając Figma MCP z Code Connect:
1. Zeskanuj wszystkie komponenty w systemie projektowym
2. Wygeneruj komponenty Vue pasujące do każdego komponentu Figma
3. Użyj naszych istniejących komponentów bazowych gdzie zmapowane
4. Utwórz historie Storybook dla każdego komponentu"

# Przykładowy przepływ pracy
"Wybierz komponent Button w Figma i:
- Wygeneruj komponent Vue ze wszystkimi wariantami
- Wyodrębnij props z właściwości komponentu Figma
- Zastosuj tokeny projektowe dla spójnego motywu
- Utwórz interfejsy TypeScript dla props"

Zaawansowane wzorce

Optymalizacja wydajności

Optymalizacja komponentów

Analizuj komponent UserList.vue i optymalizuj:
1. Implementuj virtual scrolling dla dużych list
2. Dodaj właściwe key bindings
3. Używaj shallowRef gdzie to właściwe
4. Implementuj memo dla kosztownych obliczeń
5. Dodaj lazy loading dla obrazów
6. Optymalizuj re-renders z v-memo

Optymalizacja pakietu

Skonfiguruj Vite dla optymalnego bundlowania aplikacji Vue:
1. Skonfiguruj strategię chunk splitting
2. Skonfiguruj ekstrakcję CSS
3. Implementuj dynamiczne importy
4. Dodaj plugin kompresji
5. Skonfiguruj tree shaking
6. Wygeneruj analizę pakietu

Strategie testowania

Wzorzec testowania komponentów:

Prompt generowania testów

Wygeneruj kompleksowe testy dla ProductCard.vue:
1. Montuj komponent z różnymi props
2. Testuj interakcje użytkownika (click, hover)
3. Weryfikuj emitowane zdarzenia
4. Testuj warunkowe renderowanie
5. Sprawdź atrybuty dostępności
6. Mockuj interakcje store Pinia
7. Testuj stany błędów
8. Snapshot testing dla spójności UI

Przepływ pracy testowania E2E:

Utwórz testy Playwright dla naszego przepływu checkout:
- Nawiguj do strony produktu
- Dodaj elementy do koszyka
- Przejdź do checkout
- Wypełnij formularz płatności
- Weryfikuj potwierdzenie zamówienia
- Testuj scenariusze błędów
- Testowanie responsywności mobilnej

Wzorce Vue + TypeScript

Type-safe props i emits

Utwórz komponent DataTable z pełną obsługą TypeScript:
- Typ generyczny dla danych wiersza
- Typowane definicje kolumn
- Type-safe sortowanie i filtrowanie
- Właściwie typowane sloty
- Emitery zdarzeń z typami payload
- Discriminated unions dla rendererów komórek

Wzorce typów composable

Zbuduj type-safe composable API:
1. Funkcja generyczna dla różnych endpointów
2. Właściwa obsługa typów błędów
3. Typy stanów loading i data
4. Integracja abort controller
5. Interceptory request/response
6. Wnioskowanie typów z endpointu

Typowe pułapki i rozwiązania

Problemy z reaktywnością

Wzorzec diagnozy:

Mój komponent Vue nie aktualizuje się gdy dane się zmieniają.
Pomóż mi debugować przez:
1. Sprawdzenie przerw reaktywności
2. Identyfikację mutacji vs reassignment
3. Weryfikację zależności computed
4. Sprawdzenie stale closures
5. Dodanie logów debug dla wartości reaktywnych

Zapobieganie wyciekom pamięci

Przejrzyj katalog components/ pod kątem potencjalnych wycieków pamięci:
- Czyszczenie event listenerów w onUnmounted
- Czyszczenie interval/timeout
- Odłączanie intersection observer
- Zamykanie połączeń WebSocket
- Czyszczenie subskrypcji store

Wzorce specyficzne dla Nuxt.js

Rozwój Nuxt 3

Skonfiguruj projekt Nuxt 3 z:
1. Routingiem opartym na plikach
2. Trasami API w /server/api
3. Integracją Pinia
4. Niestandardową stroną błędu
5. Optymalizacją SEO z useHead
6. Obsługą zmiennych środowiskowych
7. Konfiguracją serwera Nitro

Względy po stronie serwera

Implementuj wzorce bezpieczne dla SSR:
- Użycie API tylko przeglądarki
- Wartości losowe bezpieczne dla hydratacji
- Uwierzytelnianie oparte na cookie
- Strategie pobierania danych API
- Wrapping komponentów client-only

Wzorce integracji

Vue + Tailwind CSS

Utwórz konfigurację biblioteki komponentów:
1. Komponenty bazowe z Tailwind
2. Obsługa dark mode
3. Konfigurowalny motyw
4. Wzorzec compound components
5. Dostępność domyślnie
6. Integracja Storybook

Następne kroki

• Eksploruj wzorce React dla porównania
• Naucz się wzorców Nuxt dla full-stack Vue
• Sprawdź wzorce testowania dla głębszych strategii testowania

Uwaga

Zawsze weryfikuj kod Vue wygenerowany przez AI pod kątem:

• Poprawnego użycia reaktywności (ref vs reactive)
• Właściwego użycia hooków lifecycle
• Zapobiegania wyciekom pamięci
• Type safety TypeScript
• Różnic składni Vue 3 vs Vue 2