Szkolenie Fullstack z Nuxt.js i Vue.js
Poziom
ŚredniozaawansowanyCzas
24h / 3 dniTermin
IndywidualnieCena
IndywidualnieSzkolenie Fullstack z Nuxt.js i Vue.js
Szkolenie Fullstack z Nuxt.js i Vue.js to praktyczny kurs tworzenia nowoczesnych aplikacji webowych w ekosystemie Vue 3, Nuxt 3 i TypeScript. Program obejmuje konfigurację projektu, routing, nawigację, SSR, SSG, SPA, hybrydowe strategie renderowania, zarządzanie stanem z Pinia, integrację z API, formularze, middleware, wtyczki, stylowanie, optymalizację wydajności, testowanie, debugowanie oraz podstawy wdrożenia i zabezpieczania aplikacji. Uczestnicy uczą się projektować aplikacje łączące warstwę front-endową i serwerową Nuxt, świadomie dobierać sposób renderowania do wymagań projektu, organizować dane między serwerem i klientem oraz przygotowywać aplikację do dalszego rozwoju w środowisku zespołowym. Szkolenie koncentruje się na praktycznych mechanizmach Nuxt.js, bez obiecywania pełnej architektury produkcyjnej poza zakresem 3 dni.
Dla kogo jest to szkolenie?
Dla programistów front-end, którzy chcą poszerzyć swoje umiejętności o pracę z Nuxt.js i Vue.js w kontekście projektów fullstack-
Dla osób znających podstawy JavaScript i Vue.js, które chcą nauczyć się budowy aplikacji opartych na Server-Side Rendering, statycznym generowaniu stron i hybrydowych strategiach renderowania
-
Dla zespołów programistycznych, które chcą wprowadzić nowoczesne podejście do budowy aplikacji webowych w swoich projektach
-
Dla freelancerów i startupów, którzy potrzebują narzędzi do szybkiego tworzenia wydajnych i elastycznych aplikacji webowych
Czego nauczysz się na szkoleniu?
- Skonfigurujesz projekt Nuxt.js z użyciem Vue 3, TypeScript, Node.js, npm, Git i współczesnego środowiska developerskiego
- Dobierzesz strategie renderowania Nuxt.js, w tym SSR, SPA, SSG i podejście hybrydowe, do wymagań projektu, SEO i wydajności
- Zbudujesz routing, dynamiczne ścieżki, middleware, nawigację oraz przepływ danych między stronami aplikacji
- Uporządkujesz stan aplikacji z użyciem Pinia oraz zintegrujesz dane z API po stronie serwera i klienta
- Przygotujesz formularze, walidację, obsługę błędów, stylowanie interfejsu i podstawową optymalizację zgodną z Web Vitals
- Przetestujesz, zdebugujesz i przygotujesz aplikację Nuxt.js do wdrożenia z uwzględnieniem podstawowych zasad bezpieczeństwa danych, API i uwierzytelniania
Program szkolenia
Dzień 1
Moduł 1: Wprowadzenie i przygotowanie środowiska
- Wprowadzenie do Nuxt.js, zalety frameworka i typowe zastosowania projektowe.
- Środowisko developerskie: Node.js, npm, Git i konfiguracja IDE.
- Repozytorium projektowe, struktura pracy zespołowej i podstawowa kontrola wersji.
Moduł 2: Nowy projekt Nuxt.js
- Projekt Nuxt.js z użyciem CLI.
- Struktura projektu Nuxt.js, katalogi aplikacji i konwencje frameworka.
- Pliki konfiguracyjne, aliasy i podstawowe ustawienia projektu.
Moduł 3: Routing i nawigacja
- Routing w Nuxt.js i struktura stron aplikacji.
- Dynamiczne i zagnieżdżone ścieżki.
- Middleware tras i przejścia między stronami.
- Menu nawigacyjne i struktura linków aplikacji.
- Parametry tras, query params i dane przekazywane między stronami.
Moduł 4: Server-Side Rendering (SSR)
- Mechanizm SSR, korzyści i ograniczenia renderowania serwerowego.
- Konfiguracja projektu pod kątem SSR.
- Optymalizacja wydajności SSR i kontrola kosztu renderowania.
- Generowanie stron statycznych oraz różnice między SSR, SPA i statycznym generowaniem stron.
- Dobór metody generowania stron do potrzeb projektu, danych i SEO.
Dzień 2
Moduł 5: Zarządzanie stanem z Pinia
- Pinia, konfiguracja store i rola centralnego stanu w Nuxt.js.
- Store w Pinia, akcje, getters i podstawowa organizacja danych.
- Moduły w Pinia oraz stan globalny i lokalny.
- Synchronizacja danych między store a komponentami.
- Asynchroniczne akcje w Pinia i obsługa stanów ładowania.
- Integracja z API oraz zarządzanie danymi po stronie serwera i klienta.
Moduł 6: Stylowanie i optymalizacja UI
- Narzędzia stylowania: Tailwind CSS, SCSS i style komponentów.
- Responsywne widoki, układy stron i adaptacja interfejsu do urządzeń.
- Stylizacja układów, komponentów i stron aplikacji.
- Optymalizacja zgodna z Web Vitals: lazy loading, code splitting, cache’owanie, minimalizacja i kompresja zasobów.
Moduł 7: Praca z formularzami i API
- Formularze, walidacja danych i komunikaty błędów.
- Dane formularzy po stronie serwera i klienta.
- Obsługa błędów API, stanów ładowania i odpowiedzi niepoprawnych.
- Backend w Nuxt, server routes i integracja z zewnętrznymi usługami.
- Odpowiedzi API, format danych i spójność kontraktów komunikacji.
Dzień 3
Moduł 8: Wtyczki i oprogramowanie pośredniczące
- Niestandardowe wtyczki, konfiguracja globalna i integracja bibliotek.
- Middleware dla routingu, uwierzytelniania i ochrony wybranych widoków.
Moduł 9: Testowanie i debugowanie
- Testy jednostkowe, integracyjne i end-to-end.
- Narzędzia testowe dla aplikacji Nuxt.js, Vue Test Utils, Vitest i Playwright.
- Debugowanie, diagnostyka błędów i analiza problemów po stronie serwera oraz klienta.
Moduł 10: Deployment i zabezpieczanie aplikacji
- Aplikacja gotowa do środowiska produkcyjnego.
- Platforma hostingowa, deployment lokalny, cloud i wymagania uruchomieniowe Nuxt.js.
- Zabezpieczenia aplikacji: ochrona danych i API, zarządzanie tokenami i uwierzytelnianiem.
Moduł 11: Podsumowanie i wnioski
- Zakres zdobytej wiedzy i kluczowe decyzje projektowe.
- Dobre praktyki w projektach z Nuxt.js.
- Sesja pytań i odpowiedzi.
