Zatrudnij mnie

// usługi

Migracja SPA na Vue do Nuxt bez zaczynania od zera.

Twoja aplikacja na Vue działa, ale jej publiczne strony trafiają do przeglądarki jako pusty szkielet. Wyszukiwarki i podglądy linków widzą niewiele, meta tagi ustawiają się z opóźnieniem, a każda poprawka SEO staje się obejściem.

Przenoszę aplikację do Nuxt w zaplanowanych krokach — routing, pobieranie danych, zarządzanie head i renderowanie — zachowując Twoje komponenty i adresy URL. Strony publiczne dostają kompletny HTML, a część prywatna działa jak dotąd.

Porozmawiajmy o projekcie  Nuxt czy Vue? Najpierw przeczytaj porównanie

01 // fit

Ta usługa jest dla Ciebie, jeśli…

situations.md
  • publiczne strony Twojej SPA na Vue słabo się indeksują lub mają puste podglądy linków;
  • title, description i canonical są ustawiane w przeglądarce i zachowują się nieprzewidywalnie;
  • potrzebujesz zlokalizowanych landing page’y z poprawnym hreflang;
  • routing i layouty w SPA rozrosły się i trudno je zmieniać;
  • potrzebujesz warstwy serwerowej: proxy do API, obsługi formularzy lub danych dostępowych, które nie mogą trafić do przeglądarki;
  • chcesz SSR lub prerenderingu bez przepisywania interfejsu od nowa.

02 // scope

Zakres prac

  1. scope/01

    Audyt migracji

    Co przechodzi bez zmian, co trzeba zmienić, a co powinno zostać SPA po stronie klienta — spisane, zanim ruszy kod.

  2. scope/02

    Plan renderowania per trasa

    SSR, prerendering, renderowanie z cache lub tylko po stronie klienta — ustawiane dla każdej trasy przez route rules.

  3. scope/03

    Routing i layouty

    Konfiguracja Vue Router przeniesiona do pages/ i layouts/, z tymi samymi URL-ami lub jawnymi przekierowaniami.

  4. scope/04

    Pobieranie danych

    Zapytania wykonywane tylko w przeglądarce przeniesione do useFetch / useAsyncData, bez podwójnego pobierania przy hydracji.

  5. scope/05

    Warstwa SEO

    Title, description, canonical, hreflang, sitemap i dane strukturalne renderowane do HTML.

  6. scope/06

    Kod bezpieczny dla SSR

    Kod korzystający z window, document lub localStorage, pluginy i biblioteki zewnętrzne dostosowane do działania na serwerze.

03 // diagram

Co się zmienia, gdy SPA na Vue staje się aplikacją Nuxt

Komponenty zostają. Zmienia się wszystko wokół nich — sposób definiowania tras, miejsce pobierania danych i to, kto buduje HTML. Czerwone linie to typowa konfiguracja SPA, zielone — jej odpowiednik w Nuxt.

migrate.ts · health

index.html → <div id="app"></div>

HTML z serwera dla każdej publicznej trasy

router/index.ts → trasy pisane ręcznie

pages/ → trasy z plików, te same URL-e

onMounted → fetch w przeglądarce

useFetch → dane pobierane na serwerze

document.title ustawiany skryptem

useSeoMeta → title, canonical, hreflang w HTML

scan: live

04 // pipeline.yml

Jak przebiega praca

● passed · services/vue-to-nuxt-migration · main5 etapy · 0 niespodzianek
  1. ~1 tydz.
    audit:spa

    Audyt

    Trasy, pobieranie danych, kod działający tylko w przeglądarce i obecny stan SEO stron publicznych.

    → plan migracji
  2. ~1 tydz.
    plan:routes

    Plan tras

    Które trasy będą renderowane na serwerze, prerenderowane, a które zostaną po stronie klienta; mapa URL-i, przekierowania i wycena.

    → mapa tras i wycena
  3. tygodnie
    migrate:incremental

    Migracja

    Routing, pobieranie danych, head i pluginy przenoszone małymi krokami; istniejące komponenty wykorzystane ponownie. Cotygodniowe demo na stagingu.

    → aplikacja Nuxt na stagingu
  4. ~1 tydz.
    verify:parity

    Kontrola zgodności

    Porównanie starej i nowej wersji: URL-e, kody odpowiedzi, title, canonical, sitemap i wydajność.

    → checklista wydania
  5. per wydanie
    deploy:switch

    Przełączenie

    Przełączenie produkcji przez CI/CD z przekierowaniami i możliwością wycofania, a potem monitorowanie indeksacji.

    → aplikacja Nuxt na produkcji

05 // outcomes

Czego możesz się spodziewać

  • Strony publiczne zwracają kompletny HTML z treścią, meta tagami i prawdziwymi linkami.
  • Te same adresy URL co wcześniej albo jawne przekierowania — bez cicho utraconych stron.
  • Twoje komponenty Vue wykorzystane ponownie, a nie przepisane.
  • Jasny podział na trasy renderowane na serwerze, prerenderowane i tylko po stronie klienta.
  • Udokumentowana konfiguracja i wdrożenie dla nowego środowiska.

06 // stack

Technologie

Komponenty Vue 3 zostają; Nuxt przejmuje routing, pobieranie danych, zarządzanie head i build. Projekt na Vue 2 najpierw wymaga aktualizacji do Vue 3 — można ją zaplanować w ramach tej samej pracy.

export const stack = [
'Vue 3',
'Nuxt 4',
'TypeScript',
'Vue Router',
'Pinia',
'@nuxtjs/i18n',
'Nitro',
'Docker',
'CI/CD'
]

07 // evidence

Gdzie robiłem to wcześniej

Na Nuxt z renderowaniem po stronie serwera buduję produkty publiczne — także tę stronę.

  • Ta strona: Nuxt 4 z prerenderowanymi stronami SSR, trzy języki, hreflang i dane strukturalne.
  • W Right Information: funkcje SSR w monorepo Yii2 / Nuxt 3 z zachowaniem zgodności ze starszą platformą.
  • W projektach Domodessa i wynajmu aut w Tajlandii część publiczna to Nuxt, a panel administracyjny pozostaje osobną aplikacją Vue (Quasar) — to ten sam podział, który daje częściowa migracja.

Powiązane case study

08 // faq

Pytania, które klienci zadają najpierw

Czy musimy przepisać komponenty?

Zwykle nie. Komponenty jednoplikowe Vue 3 przechodzą do Nuxt w dużej mierze bez zmian. Zmiany skupiają się na routingu, pobieraniu danych, zarządzaniu head i kodzie korzystającym z API dostępnych tylko w przeglądarce.

Nasza aplikacja działa jeszcze na Vue 2. Czy da się ją przenieść?

Tak, ale aktualny Nuxt wymaga Vue 3, więc najpierw przychodzi aktualizacja do Vue 3. Oba kroki można zaplanować jako jeden projekt realizowany etapami.

Czy możemy przenieść tylko część publiczną?

Tak, i często to najrozsądniejsza opcja: trasy publiczne przechodzą do Nuxt, a część prywatna zostaje SPA na Vue albo staje się trasami tylko po stronie klienta w Nuxt.

Czy migracja poprawi nasze pozycje w Google?

Usuwa przeszkody techniczne: treść, meta tagi i linki są w pierwszej odpowiedzi. O pozycjach nadal decydują treść, linki i konkurencja, dlatego nie obiecuję konkretnych miejsc.

Jak uniknąć utraty ruchu przy przełączeniu?

Zachowując te same URL-e lub jawnie je przekierowując, porównując przed przełączeniem kody odpowiedzi, title, canonical i sitemap oraz obserwując indeksację po nim.

Jak rozliczana jest praca?

Zaczynamy od audytu i planu tras. Potem albo stały zakres migracji, albo stawka godzinowa od 30 USD/h. Jeśli audyt pokaże, że migracja się nie opłaca, powiem to wprost.

09 // related

Powiązane usługi

// Zanim wybierzesz technologię

git push --message

Myślisz o przeniesieniu SPA na Vue do Nuxt?

Wyślij link do aplikacji i jedno zdanie o tym, co nie działa. Odpowiem w ciągu jednego dnia roboczego — i uczciwie powiem, jeśli migracja się nie opłaca.

Porozmawiajmy o projekcie →cd ../services · Wszystkie usługi
© 2026 Pavlo Babik · Polska · NIP 5140367536 build cc15d5d · nuxt · 0 trackerów · hosting w UE