Kurs Nuxt.js
Programiści specjalizujący się w JavaScript już dawno przestali być postrzegani jako tylko i wyłącznie Front-End developerzy. JavaScript po stronie serwera jest już z nami ponad 10 lat za sprawą pierwszych wersji NodeJS.
42 lekcji
7h 2min
5 (4 oceny)
Nuxt.js - Prosty i Nowoczesny Framework dla Vue.js
Praktyczny kurs - praktyczny projekt
W tym projekcie tworzyć będziemy praktyczny projekt - klona Wikipedii! Minipedia pobierze dane z prawdziwego źrodła danych, zewnętrznego API WikiMedia - będzie łudząco podobna do oryginału oraz współdzieliła najważniejsze funkcjonalności, takie jak dostarczanie treści w różnych wersjach językowych, możliwość wyszukiwania artykułów, czy pobieranie najpopularniejszych wpisów dla danego języka. Stworzymy także podstronę wyświetlającą za każdym razem losowy artykuł w danej wersji językowej.Zobaczysz też, jak dokonać migracji ze statycznej strony HTML na Nuxt - oraz jak tworzyć przykładowe komponenty podczas tego procesu.Dzięki temu wszystkiemu, dowiesz się jak wykorzystać nabytą wiedzę w praktyce.
Renderowanie po stronie serwera
Dzięki Nuxtowi dowiesz się jak optymalizować Twoje strony www z duchem idei progressive enhancement, dostarczając coraz to lepsze doświadczenia dla swoich użytkowników oraz tworząc aplikację napisaną w 100% w JavaScript, która będzie działała nawet wtedy, gdy użytkownik jawnie wyłączy go w przeglądarce! To wszystko za SSR (Server Side Rendering), dzięki któremu treści będą gotowe do konsumpcji już przy wstępnej, pierwszej odpowiedzi z serwera WWW.Oczywiście, ma to swoje implikacje na wydajność naszej aplikacji - sprawiając że Lighthouse czy optymalizacja pod SEO staje się coraz prostsza!
Najciekawsze pluginy i moduły
Czymże jest ekosystem danego frameworka bez wsparcia społeczności! Dlatego podczas tego kursu nauczysz się instalować i wykorzystywać różne pluginy i moduły, które zaoszczędzą Ci dużo czasu. Dowiesz się też, jak tworzyć własne moduły - które rozszerzą działanie Twojej aplikacji Nuxt w sposób czysty i zarządzalny.
Tworzenie API
Nuxt jest frameworkiem w którym pracujemy zarówno po stronie front-endu, jak i back-endu. W związku z czym, stworzymy swoje własne API (bazujące na express.js) które będzie pewnego rodzaju pośrednikiem pomiędzy API WikiMedia oraz Twoją aplikacją internetową.
Routing w Nuxt
W tym kursie, dowiesz się także jak tworzyć swoje własne Middleware'y - czyli fragmenty kodu wywoływane pomiędzy przechodzeniem między stronami, czy podczas innych zapytań HTTP.Dodatkowo, zobaczysz jakie narzędzia daje nam Nuxt aby tworzyć progresywne aplikacje internetowe, oferując wsparcie dla takich funkcjonalności jak np. animacje między przejściami pojedynczymi podstronami naszego serwisu.
Lokalizacja i tłumaczenie danych
Tajemnicze i18n - czyli numeronim odpowiadający angielskiemu słowu "internalisation" - odnosi się w kontekście web developmentu do tłumaczenia danych na różne języki. Podczas realizacji projektu Minipedii, nie tylko wykorzystamy standardowe podejście do tłumaczeń stałych elementów naszego interfejsu użytkownika, ale także przetłumaczymy same dane zwracane z API, wykorzystując inną wersję językową w zależności od preferencji użytkownika!
Optymalizacja dla wyszukiwarek internetowych
Poznasz też kilka ciekawych pluginów i rozwiązań dotyczących optymalizacji pod SEO - poza faktem, że podejście spełniające intencje użytkownika jest najlepszym, co możemy zrobić - pluginy generujące nam mapę stron automatycznie na podstawie zadeklarowanych przez nas podstron, czy generatory danych jsonld pomogą w pozycjonowaniu Twojej wydajnej aplikacji jeszcze wyżej w hierarchii wyszukiwarek.
Dla kogo jest ten kurs?
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End, z naciskiem na umiejętność posługiwania się JavaScriptem oraz solidne podstawy NodeJS. Konieczna jest znajomość Vue, jako że Nuxt jest frameworkiem korzystającym z niego u swoich podstaw. Jeśli czujesz się dość swobodnie w wyżej wymienionych aspektach web developmentu, ten kurs będzie idealny dla Ciebie.
Czego się nauczysz?
-
Praktyczny kurs, praktyczny projekt: klon Wikipedii
-
Migracja statycznej strony HTML do ekosystemu Nuxt
-
Tworzenie klasycznych komponentów VueJS
-
Przygotowanie własnego API i konsumpcja zewnętrznych endpointów
-
Tworzenie i wykorzystanie modułów i pluginów do Nuxt
-
SSR - Server Side Rendering
-
Programowanie z duchem idei progressive enhancement
-
Animacje podczas przejść między podstronami
-
Wsparcie dla różnych wersji językowych
-
Niebanalne funkcjonalności aplikacji
-
Optymalizacja dla wyszukiwarek internetowych
Zawartość
Nuxt.js
13 rozdziały 42 lekcji 7h 2min
-
Wstęp
12min
-
Fundamenty Nuxta
41min
Tworzenie nowego projektu
10min
Struktura aplikacji
11min
Konfiguracja
6min
-
Migracja do Nuxta
21min
Cykl życia aplikacji
6min
Przenoszenie statycznej strony do nuxta
11min
Tworzenie layoutów strony
4min
-
Tworzenie standardowych komponentów Vue
44min
Sekcja treści
11min
Spis treści
14min
Główne informacje
19min
-
Pluginy i moduły
20min
Rozszerzenia do Vue
8min
-
Tworzenie API
37min
JavaScript po stronie serwera
3min
Server middleware
10min
Połączenia z innymi źródłami danych
9min
Integracja z wikijs
16min
-
Renderowanie po stronie serwera
1h 3min
Wykorzystanie Vuexa
11min
Async data
12min
Routing middleware
16min
Podpinanie komponentów pod dane z serwera
10min
Aktualizacja głównych informacji
14min
-
Routing w Nuxt
23min
Nuxtowe linki
5min
Przejścia między podstronami
8min
Dynamiczne podstrony
10min
-
Programowe użycie nuxta
18min
Generowanie statycznych plików
7min
Start aplikacji z innego entrypointu
11min
-
Lokalizacja danych
1h 1min
Tłumaczenie stałych elementów interfejsu
12min
Implementacja różnych wersji językowych
11min
Lista dostępnych języków
21min
Tłumaczenie na poziomie API
17min
-
Udoskonalanie projektu Minipedii
58min
Odnośniki do prawdziwego źródła danych
7min
Strona ładująca losowe artykuły
14min
Wyszukiwarka po stronie
18min
-
Optymalizacja dla wyszukiwarek
21min
Sitemap generation
5min
SEO przy użyciu JSONLD Schema
9min
Dobre praktyki
7min
-
Zakończenie
5min
Co dalej - Vue3 i Nuxt3
4min
Podziękowanie
Autor kursu
Wojciech Połowniak
Sr. Fullstack Engineer
Średnia ocen autora: 5
Dołącz do ponad 10 tys. zadowolonych z naszych kursów
Robert Studziński
1 października 2021
Nadzieja Karpińska
5 listopada 2021
Adam Jaworek
7 grudnia 2021
Mateusz Stec
15 lutego 2022
Kurs Nuxt.js
-
42 lekcji wideo
-
7h 2min materiału
-
Ostatnia rewizja 27.10.2021
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Dlaczego wybrać właśnie ten kurs?
Efektywna nauka
Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
Wiedza ekspertów
Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
Praktyczne przykłady
Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
Pytania i odpowiedzi
Przeczytaj najczęściej zadawane pytania
Masz więcej pytań?
Porozmawiaj z nami na na czacie
Zadzwoń +48 880880606
Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.
Jak jest skonstruowany kurs?Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.
Jak najlepiej wykorzystać kurs?Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!
Jak mogę uzyskać dostęp do kursu?Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.
Czy kurs jest aktualny?Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.
Czym się różni kurs od warsztatu i ścieżki?Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.
We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.
Adam Romański
helloroman.com
Zacznij naukę w Nuxt.js
-
42 lekcji wideo
-
7h 2min materiału
-
Ostatnia rewizja 27.10.2021
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Kursy które mogą Cię również zainteresować
Nowości w NextJS13
Daniel Noworyta
Tailwind CSS
Daniel Noworyta
NestJS od Podstaw
Adam Gospodarczyk
Szeroka Perspektywa Full-Stack Web Developmentu
Adam Gospodarczyk
Narzędzia JavaScript Full-Stack Web Developera
Adam Gospodarczyk