Wzorce rozwoju Nuxt 3

Opanuj rozwój full-stack Vue z Nuxt 3 używając Cursor i Claude Code. Te wzorce obejmują renderowanie po stronie serwera, trasy API, pobieranie danych, wdrożenie oraz unikalne funkcje, które czynią Nuxt potężnym frameworkiem dla aplikacji produkcyjnych.

Szybka konfiguracja projektów Nuxt

Inicjalizacja Nuxt 3 z AI

Cursor

1. Otwórz Cursor i utwórz nowy folder
2. Uruchom tryb Agent (Cmd/Ctrl + I)
3. Prompt: “Utwórz nowy projekt Nuxt 3 z TypeScript, Tailwind CSS, Pinia i @nuxt/test-utils do testowania. Zawieraj konfigurację ESLint i Prettier”
4. Włącz tryb YOLO dla automatycznego wykonywania
5. Przejrzyj nuxt.config.ts i strukturę projektu

Claude Code

1. Przejdź do katalogu projektów
2. Uruchom claude w terminalu
3. Wykonaj: “Inicjalizuj projekt Nuxt 3 z TypeScript, trasami serwera, konfiguracją wdrożenia Nitro i konfiguracją testową. Dodaj moduły Tailwind CSS i Pinia”
4. Claude zbuduje i skonfiguruje wszystko
5. Uruchom /init aby utworzyć specyficzny dla Nuxt CLAUDE.md

Konfiguracja kontekstu AI dla Nuxt

.cursor/rules/nuxt-patterns.md

# Zasady rozwoju Nuxt 3

## Konwencje frameworka
- Używaj auto-importów Nuxt 3 (bez ręcznych importów dla Vue, composables)
- Routing oparty na plikach w katalogu pages/
- Trasy serwera w server/api/
- Composables w katalogu composables/
- Middleware w katalogu middleware/

## Standardy kodu
- TypeScript dla wszystkich plików
- Composition API z <script setup>
- Używaj composables Nuxt (useFetch, useAsyncData, useState)
- Pobieranie danych po stronie serwera w setup

## Wytyczne wydajności
- Lazy load komponenty z prefiksem Lazy
- Używaj nitro prerender dla stron statycznych
- Implementuj właściwe strategie cache'owania
- Optymalizuj obrazy z @nuxt/image

Wzorce po stronie serwera

Rozwój tras API

RESTful API

Tworzenie tras serwera:

Prompt Cursor/Claude

Utwórz kompletne CRUD API dla produktów w server/api/:
1. GET /api/products - lista z paginacją
2. GET /api/products/[id] - pojedynczy produkt
3. POST /api/products - tworzenie z walidacją
4. PUT /api/products/[id] - aktualizacja
5. DELETE /api/products/[id] - soft delete

Zawieraj:
- Schematy walidacji Zod
- Middleware obsługi błędów
- Typy TypeScript współdzielone z frontendem
- Rate limiting
- Sprawdzanie uwierzytelniania

Integracja tRPC

Type-Safe API z tRPC:

Skonfiguruj tRPC w naszej aplikacji Nuxt:
1. Zainstaluj i skonfiguruj @trpc/server dla Nuxt
2. Utwórz typowany router z procedurami
3. Skonfiguruj hooki po stronie klienta
4. Współdziel typy między klientem/serwerem
5. Dodaj kontekst uwierzytelniania
6. Implementuj obsługę błędów

Integracja bazy danych

Prisma z Nuxt:

Skonfiguruj Prisma dla naszej aplikacji Nuxt:
1. Skonfiguruj Prisma z SQLite dla rozwoju
2. Utwórz schemat dla użytkowników, postów, komentarzy
3. Wygeneruj klienta Prisma
4. Utwórz narzędzia serwera dla dostępu do bazy danych
5. Dodaj skrypty migracji
6. Implementuj pooling połączeń
7. Skonfiguruj dane seed

Notatka

💡 Wskazówka: Poproś AI o utworzenie pliku server/utils/db.ts, który eksportuje cache’owaną instancję klienta Prisma, aby uniknąć problemów z połączeniami w rozwoju.

Wzorce pobierania danych

Zaawansowane wzorce useFetch

Przykłady pobierania danych

Utwórz przykłady pokazujące:
1. Równoległe pobieranie danych z Promise.all
2. Zapytania zależne z watch
3. Nieskończone przewijanie z useFetch
4. Aktualizacje w czasie rzeczywistym z EventSource
5. Optymistyczne aktualizacje
6. Globalna obsługa błędów
7. Deduplikacja żądań

Zarządzanie stanem

Globalny stan z Pinia:

1. Konfiguracja store

   Utwórz store Pinia dla naszej aplikacji e-commerce, który:
   - Integruje się z useFetch Nuxt
   - Obsługuje hydratację SSR właściwie
   - Implementuje plugin persist po stronie klienta
   - Ma akcje działające zarówno na serwerze, jak i kliencie

2. Zapobieganie zanieczyszczeniu stanu między żądaniami

   Pokaż mi, jak zapobiegać zanieczyszczeniu stanu w SSR przez:
   - Używanie useState dla stanu ograniczonego do żądania
   - Właściwe resetowanie store'ów Pinia
   - Implementowanie funkcji factory

Funkcje specyficzne dla Nuxt

Zarządzanie auto-importami

Analizuj naszą aplikację Nuxt i:
1. Skonfiguruj niestandardowe auto-importy w nuxt.config
2. Utwórz type-safe composables
3. Skonfiguruj auto-importy komponentów
4. Skonfiguruj auto-importy narzędzi
5. Obsługuj kolizje nazw
6. Wygeneruj właściwe deklaracje TypeScript

Wzorce middleware

Middleware tras

Utwórz middleware auth, które:
- Sprawdza tokeny JWT
- Przekierowuje do loginu
- Obsługuje tokeny odświeżania
- Działa z trybami SSR/SPA

Middleware serwera

Implementuj middleware serwera dla:
- Logowania żądań
- Obsługi CORS
- Rate limiting
- Nagłówków bezpieczeństwa

Optymalizacja wydajności

Wdrożenie Nitro

Konfiguracja produkcyjna:

Skonfiguruj Nitro dla produkcji:
1. Skonfiguruj zasady prerenderingu
2. Skonfiguruj wdrożenie edge function
3. Implementuj ISR (Incremental Static Regeneration)
4. Skonfiguruj nagłówki cache'owania
5. Skonfiguruj integrację CDN
6. Optymalizuj zimne starty
7. Skonfiguruj health checks

Optymalizacja pakietu

Code splitting

Optymalizuj pakiety naszej aplikacji Nuxt:
- Analizuj z @nuxt/analyze
- Implementuj splitting oparty na trasach
- Lazy load ciężkie komponenty
- Wyodrębnij chunki vendor
- Tree-shake nieużywany kod
- Optymalizuj Tailwind CSS

Optymalizacja obrazów

Skonfiguruj moduł @nuxt/image:
- Skonfiguruj providerów (Cloudinary, Vercel)
- Implementuj responsywne obrazy
- Dodaj lazy loading
- Skonfiguruj blur placeholders
- Skonfiguruj generowanie WebP
- Implementuj art direction

Strategie testowania

Testowanie komponentów

Przepis testowania Nuxt

Napisz testy dla naszych komponentów Nuxt:
1. Skonfiguruj @nuxt/test-utils
2. Testuj strony z parametrami tras
3. Mockuj odpowiedzi useFetch
4. Testuj granice błędów
5. Weryfikuj meta tagi SEO
6. Testuj granice suspense
7. Mockuj stan uwierzytelniania

Testowanie E2E

Utwórz testy Playwright dla krytycznych przepływów:
- Testuj SSR/hydratację
- Weryfikuj działanie tras API
- Testuj przesyłanie formularzy
- Sprawdź elementy SEO
- Testuj strony błędów
- Weryfikuj przekierowania
- Testuj routing i18n

Zaawansowane wzorce

Multi-tenancy

Implementuj architekturę multi-tenant:
1. Detekcja najemcy na podstawie domeny
2. Middleware specyficzne dla najemcy
3. Strategie izolacji bazy danych
4. Personalizacja motywu per najemca
5. Trasy API specyficzne dla najemcy
6. Współdzielona biblioteka komponentów

Funkcje w czasie rzeczywistym

Integracja WebSocket:

Dodaj funkcje w czasie rzeczywistym z WebSocketami Nitro:
1. Skonfiguruj serwer WebSocket
2. Implementuj funkcjonalność chatu
3. Dodaj wskaźniki obecności
4. Obsługuj logikę ponownego łączenia
5. Skaluj z Redis pub/sub
6. Dodaj uwierzytelnianie

SEO i zarządzanie meta

Dynamiczne meta tagi

Implementuj kompleksowe SEO:
- Dynamiczne generowanie og:image
- Strukturalne dane JSON-LD
- Generowanie sitemap
- Zarządzanie robots.txt
- Obsługa canonical URL
- SEO wielojęzyczne
- Karty mediów społecznościowych

Typowe problemy i rozwiązania

Niezgodności hydratacji

Wzorzec debugowania:

Moja aplikacja Nuxt ma błędy hydratacji. Pomóż mi:
1. Zidentyfikować źródło używając Vue devtools
2. Dodać wrappery client-only gdzie potrzeba
3. Naprawić problemy z formatowaniem daty/czasu
4. Obsłużyć treści specyficzne dla użytkownika
5. Debugować z flagą --no-ssr

Wycieki pamięci

Analizuj i napraw wycieki pamięci:
- Sprawdź czyszczenie event listenerów
- Przejrzyj użycie danych reaktywnych
- Audytuj wtyczki stron trzecich
- Profiluj z Chrome DevTools
- Implementuj właściwe metody dispose

Wzorce wdrożenia

Konfiguracje specyficzne dla platform

Vercel

Skonfiguruj dla wdrożenia Vercel:
- Skonfiguruj vercel.json
- Skonfiguruj edge functions
- Ustaw zmienne środowiskowe
- Implementuj preview deployments
- Dodaj analytics

Docker

Utwórz konfigurację Docker produkcyjną:
- Multi-stage Dockerfile
- Optymalizuj rozmiar obrazu
- Skonfiguruj health checks
- Skonfiguruj plik compose
- Dodaj proxy nginx

Migracja z Nuxt 2

Pomóż mi migrować z Nuxt 2 do Nuxt 3:
1. Audytuj obecne użycie modułów
2. Aktualizuj składnię konfiguracji
3. Konwertuj na Composition API
4. Aktualizuj wzorce pobierania danych
5. Migruj Vuex do Pinia
6. Aktualizuj konfigurację budowania
7. Testuj i napraw edge cases

Następne kroki

• Eksploruj wzorce Vue dla technik komponentów
• Sprawdź wzorce Next.js dla porównania React full-stack
• Naucz się wzorców Node.js dla zaawansowanych funkcji serwera

Wskazówka

Pamiętaj: Moc Nuxt 3 wynika z jego konwencji. Pozwól AI obsłużyć kod podstawowy, podczas gdy ty skupiasz się na logice biznesowej i doświadczeniu użytkownika.