Nuxt.js

Nuxt.js: aplikacje i strony na Vue z treścią gotową dla wyszukiwarek

Nuxt (często nazywany Nuxt.js) to otwarty framework do budowy stron i aplikacji internetowych w Vue.js. Sam Vue odpowiada za interfejs, a Nuxt dokłada to, czego w większym projekcie brakuje: routing oparty na plikach, renderowanie na serwerze (SSR, ang. server-side rendering – przeglądarka i robot wyszukiwarki dostają gotowy HTML zamiast pustej strony uzupełnianej przez JavaScript), warstwę serwerową do własnego API oraz moduły do obrazów, tłumaczeń i treści. O samym Vue piszemy na stronie programiści Vue.js, a tutaj skupiamy się na tym, co daje Nuxt.

Stabilna linia to Nuxt 4 (premiera w lipcu 2025 r., wersja 4.5 z lipca 2026 r.). Nuxt 5, z nową wersją serwera Nitro, ma się według oficjalnej mapy rozwoju ukazać szacunkowo w czwartym kwartale 2026 r. W lipcu 2025 r. firma NuxtLabs, która tworzy i rozwija Nuxt oraz Nitro, dołączyła do Vercel. Oba projekty pozostały niezależne: mają licencję MIT, publiczną mapę rozwoju i otwarte zarządzanie, a aplikację nadal można uruchomić u różnych dostawców. Po tej zmianie płatne wcześniej komponenty Nuxt UI Pro trafiły do bezpłatnej biblioteki Nuxt UI 4.

Co Nuxt daje projektowi

Nuxt pozwala wybrać sposób renderowania osobno dla każdej części serwisu. W regułach tras (route rules) w pliku konfiguracyjnym można ustalić na przykład, że:

• strona główna i podstrony oferty są generowane podczas budowania (prerender) i podawane jako gotowe pliki;
• blog lub katalog produktów jest renderowany na serwerze i przechowywany w pamięci podręcznej z okresowym odświeżaniem (tryby SWR i ISR);
• panel klienta działa wyłącznie w przeglądarce, bo jest za logowaniem i nie musi trafiać do Google;
• przekierowania i nagłówki HTTP dla wybranych adresów są ustawione w jednym miejscu.

Za część serwerową odpowiada Nitro. W katalogu server/ powstają endpointy API, np. do obsługi formularzy, płatności czy integracji z CRM-em. Ten sam kod może działać na serwerze z Node.js, w funkcjach serverless uruchamianych na żądanie u dostawcy chmury albo na serwerach brzegowych sieci CDN (edge), blisko użytkownika. Dla platform takich jak Vercel, Netlify czy Cloudflare wystarczy wybrać gotowy preset, czyli zestaw ustawień wdrożenia.

Codzienną pracę ułatwiają automatyczne importy komponentów i funkcji, uporządkowana struktura katalogów z folderem app/ (od Nuxt 4), pełne wsparcie TypeScriptu oraz oficjalne moduły: Nuxt Image do optymalizacji zdjęć, Nuxt Content do treści w Markdown, YAML i JSON trzymanych w repozytorium, @nuxtjs/i18n do wersji językowych, Nuxt Scripts do ładowania skryptów zewnętrznych z mniejszym wpływem na szybkość strony oraz Nuxt UI – ponad 110 komponentów interfejsu z zestawem do Figmy. Treści na działającej stronie można edytować w darmowym module Nuxt Studio, który zapisuje zmiany bezpośrednio w repozytorium na GitHubie lub GitLabie.

Kiedy Nuxt to dobry wybór

• Masz aplikację w Vue działającą tylko w przeglądarce i potrzebujesz lepszej widoczności w Google albo szybszego pierwszego wyświetlenia.
• Budujesz portal z częścią publiczną (oferta, katalog, blog) i częścią za logowaniem (panel klienta, rezerwacje, zamówienia).
• Serwis ma kilka wersji językowych i wiele podstron generowanych z danych – z CMS-a, systemu PIM lub ERP.
• Twój zespół zna Vue, a projekt ma być rozwijany latami – wspólne konwencje Nuxt ułatwiają przekazanie kodu kolejnym programistom.

Jeśli strona ma głównie prezentować treść i prawie nie ma interakcji, rozważamy Astro, które domyślnie nie wysyła JavaScriptu do przeglądarki. Przy zespole pracującym w React odpowiednikiem Nuxt jest Next.js.

Co budujemy w Nuxt

• Portale i aplikacje webowe – Nuxt z bazą danych i logowaniem w Supabase albo z własnym API w Node.js: role użytkowników, panel administracyjny, wyszukiwarka, powiadomienia. Szerzej opisujemy to na stronie aplikacje webowe i portale.
• Serwisy firmowe z CMS-em headless – Sanity, Strapi, Contentful lub Storyblok jako panel redakcji, Nuxt jako front z renderowaniem dobranym do każdej sekcji.
• Katalogi produktów i sklepy headless – strony produktów renderowane na serwerze z pamięcią podręczną, koszyk i zamówienia obsługiwane przez API platformy e-commerce.
• Funkcje AI – czat lub wyszukiwanie w dokumentach firmy z użyciem AI SDK, które ma osobny pakiet dla Vue.

Interfejs projektujemy w Figmie i składamy z komponentów Nuxt UI lub własnych, a formularze i zdarzenia łączymy z CRM-em (Pipedrive, Odoo) oraz z pomiarem w GA4 i Google Tag Manager.

Projekty na Nuxt 3 po 31 lipca 2026 r.

Nuxt 3 osiągnął koniec wsparcia (end-of-life) 31 lipca 2026 r. – pierwotnie planowano koniec stycznia 2026 r., ale termin przesunięto o pół roku. Zespół Nuxt zaleca przejście na wersję 4, a projektom, które nie mogą się zaktualizować, wskazuje płatne wsparcie partnera zewnętrznego. Według zespołu Nuxt większość użytkowników, którzy podzielili się opinią, oceniła przejście z wersji 3 na 4 jako płynne: do dyspozycji jest polecenie nuxt upgrade i zestaw automatycznych przeróbek kodu (codemods), a większość zmian niezgodnych z poprzednią wersją można było wcześniej testować flagą zgodności. Przy przejęciu projektu sprawdzamy moduły i zależności, przenosimy kod do struktury app/ i poprawiamy pobieranie danych.

Nuxt a inne frameworki

Jak pracujemy z Nuxt

1. Mapa tras i renderowania – dla każdej części serwisu ustalamy tryb: prerender, renderowanie na serwerze z pamięcią podręczną albo działanie tylko w przeglądarce, i zapisujemy to w regułach tras.
2. Projekt i komponenty – makiety UX/UI w Figmie, komponenty Vue oparte na Nuxt UI lub własne, dostępność i wersje językowe od początku projektu.
3. Dane i API – endpointy w Nitro, pobieranie danych przez useFetch i useAsyncData, połączenie z CMS-em, Supabase lub systemami klienta, wspólne typy TypeScript dla frontu i serwera.
4. SEO i testy – meta tagi przez useSeoMeta, mapa witryny, dane strukturalne, testy z biblioteką @nuxt/test-utils i pomiar wydajności.
5. Wdrożenie i opieka – preset dla wybranej platformy albo serwer Node.js w europejskim centrum danych, monitoring błędów i regularne aktualizacje Nuxt oraz modułów.

Nuxt w pytaniach i odpowiedziach

Czekać na Nuxt 5 czy zaczynać projekt na Nuxt 4?

Zaczynać na Nuxt 4. Zespół Nuxt deklaruje, że każda wersja główna jest wspierana co najmniej pół roku po premierze następnej, a od wersji 4.2 można włączyć w konfiguracji tryb zgodności z Nuxt 5 i już teraz pisać kod uwzględniający nadchodzące zmiany. Dzięki temu późniejsza aktualizacja wymaga mniej poprawek.

Czy Nuxt jest dobry dla SEO?

Tak, jeśli strony publiczne są renderowane na serwerze lub generowane z wyprzedzeniem – wtedy wyszukiwarka dostaje pełny HTML z treścią i meta tagami. Problem pojawia się, gdy cały serwis działa tylko w przeglądarce: dokumentacja Nuxt zaznacza, że indeksowanie takiej treści trwa dłużej niż w przypadku HTML z serwera.

Nuxt czy Next.js?

Oba frameworki oferują podobny zakres: renderowanie na serwerze, generowanie stron z wyprzedzeniem i warstwę API. O wyborze zwykle decyduje biblioteka interfejsu – Vue w Nuxt, React w Next.js – oraz to, w czym jest napisany istniejący kod i w czym pracuje zespół, który będzie rozwijał projekt.

Czy istniejącą aplikację Vue można przenieść do Nuxt?

Tak, choć to migracja, a nie przełącznik. Komponenty Vue zwykle przechodzą bez większych zmian, natomiast trasy trafiają do katalogu pages/, a kod korzystający z obiektów przeglądarki, np. window, trzeba dostosować, bo podczas renderowania na serwerze tych obiektów nie ma. Zakres prac oceniamy po przeglądzie repozytorium.

Nuxt w Twoim projekcie

Przejęcie aplikacji na Nuxt 3, nowy portal w Vue albo przegląd istniejącego kodu – każdą z tych rozmów zaczynamy od listy funkcji lub dostępu do repozytorium. Prześlij krótki opis przez formularz „Zapytaj o ofertę”, a odpowiemy, od czego zacząć i jak podzielić prace na etapy. Możemy się spotkać w Szczecinie, Warszawie, Poznaniu albo online.