// послуги

Міграція SPA на Vue до Nuxt без початку з нуля.

Ваш застосунок на Vue працює, але його публічні сторінки приходять у браузер порожнім каркасом. Пошуковики й прев’ю посилань бачать мало, meta-теги задаються із запізненням, а кожне SEO-виправлення перетворюється на обхідний шлях.

Я переношу застосунок на Nuxt запланованими кроками — маршрутизація, отримання даних, керування head і рендеринг — зберігаючи ваші компоненти й URL. Публічні сторінки віддають повний HTML, а приватна частина працює як раніше.

Обговорити проєкт Nuxt чи Vue? Спершу прочитайте порівняння

01 // fit

Ця послуга для вас, якщо…

situations.md

публічні сторінки вашого SPA на Vue погано індексуються або мають порожні прев’ю посилань;
title, description і canonical задаються в браузері й поводяться непередбачувано;
потрібні локалізовані лендинги з правильними hreflang;
маршрутизація й layouts у SPA розрослися, і їх важко змінювати;
потрібен серверний шар: proxy до API, обробка форм або облікові дані, які не мають потрапляти в браузер;
ви хочете SSR або prerendering, не переписуючи інтерфейс з нуля.

02 // scope

Що входить у роботу

scope/01
Аудит міграції
Що переходить без змін, що треба змінити, а що варто залишити клієнтським SPA — письмово, ще до того, як зміниться код.
scope/02
План рендерингу для маршрутів
SSR, prerendering, кешований рендеринг або лише клієнт — для кожного маршруту через route rules.
scope/03
Маршрутизація і layouts
Конфігурація Vue Router перенесена в pages/ і layouts/, з тими самими URL або явними редиректами.
scope/04
Отримання даних
Запити, що виконувалися лише в браузері, перенесені в useFetch / useAsyncData без повторного завантаження під час гідрації.
scope/05
SEO-шар
Title, description, canonical, hreflang, sitemap і структуровані дані рендеряться в HTML.
scope/06
Код, безпечний для SSR
Код, що звертається до window, document чи localStorage, плагіни й сторонні бібліотеки адаптовані до роботи на сервері.

03 // diagram

Що змінюється, коли SPA на Vue стає застосунком Nuxt

Компоненти лишаються. Змінюється все навколо них — як описані маршрути, де отримуються дані і хто формує HTML. Червоні рядки — типове налаштування SPA, зелені — його відповідник у Nuxt.

migrate.ts · health

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

HTML із сервера для кожного публічного маршруту

router/index.ts → маршрути вручну

pages/ → маршрути з файлів, ті самі URL

onMounted → fetch у браузері

useFetch → дані отримуються на сервері

document.title задається скриптом

useSeoMeta → title, canonical, hreflang у HTML

scan: live

04 // pipeline.yml

Як проходить робота

● passed · services/vue-to-nuxt-migration · main5 етапи · 0 сюрпризів

~1 тиж.
audit:spa
Аудит
Маршрути, отримання даних, код лише для браузера та поточний стан SEO публічних сторінок.
→ план міграції
~1 тиж.
plan:routes
План маршрутів
Які маршрути рендеряться на сервері, prerender-яться, а які лишаються на клієнті; карта URL, редиректи й оцінка.
→ карта маршрутів і оцінка
тижні
migrate:incremental
Міграція
Маршрутизація, отримання даних, head і плагіни переносяться невеликими кроками; наявні компоненти перевикористовуються. Щотижневі демо на staging.
→ застосунок Nuxt на staging
~1 тиж.
verify:parity
Перевірка відповідності
Порівняння старої й нової версій: URL, коди відповідей, title, canonical, sitemap і продуктивність.
→ чекліст релізу
на реліз
deploy:switch
Перемикання
Перемикання production через CI/CD з редиректами й можливістю відкату, потім моніторинг індексації.
→ застосунок Nuxt у production

05 // outcomes

Чого можна очікувати

Публічні сторінки повертають повний HTML з контентом, meta-тегами та справжніми посиланнями.
Ті самі URL, що й раніше, або явні редиректи — без непомітно втрачених сторінок.
Ваші Vue-компоненти перевикористані, а не переписані.
Чіткий поділ на маршрути із серверним рендерингом, prerendering і лише клієнтські.
Задокументовані налаштування й деплой для нового середовища.

06 // stack

Технології

Компоненти Vue 3 лишаються; Nuxt бере на себе маршрутизацію, отримання даних, керування head і збірку. Проєкту на Vue 2 спершу потрібне оновлення до Vue 3 — його можна спланувати в межах тієї самої роботи.

export const stack = [

'Vue 3',

'Nuxt 4',

'TypeScript',

'Vue Router',

'Pinia',

'@nuxtjs/i18n',

'Nitro',

'Docker',

'CI/CD'

]

07 // evidence

Де я вже це робив

Nuxt із серверним рендерингом — основа, на якій я будую публічні продукти, зокрема цей сайт.

Цей сайт: Nuxt 4 з prerender-сторінками SSR, три мови, hreflang і структуровані дані.
У Right Information: SSR-функції в монорепозиторії Yii2 / Nuxt 3 зі збереженням сумісності зі старою платформою.
У проєктах Domodessa та прокату авто в Таїланді публічна частина — Nuxt, а адмінпанель лишається окремим застосунком на Vue (Quasar) — той самий поділ, який дає часткова міграція.

Пов’язані кейси

08 // faq

Питання, які клієнти ставлять першими

Чи доведеться переписувати компоненти?

Зазвичай ні. Однофайлові компоненти Vue 3 переходять у Nuxt здебільшого без змін. Зміни зосереджені в маршрутизації, отриманні даних, керуванні head і коді, що звертається до API, доступних лише в браузері.

Наш застосунок ще на Vue 2. Його можна перенести?

Так, але актуальний Nuxt потребує Vue 3, тож спершу оновлення до Vue 3. Обидва кроки можна спланувати як один проєкт і виконати поетапно.

Чи можна перенести лише публічну частину?

Так, і часто це найрозумніший варіант: публічні маршрути переходять на Nuxt, а приватна частина лишається SPA на Vue або стає лише клієнтськими маршрутами в Nuxt.

Чи покращить міграція наші позиції в Google?

Вона прибирає технічні перешкоди: контент, meta-теги й посилання є в першій відповіді. Позиції й далі залежать від контенту, посилань і конкуренції, тому конкретних місць я не обіцяю.

Як не втратити трафік під час перемикання?

Зберігаючи ті самі URL або явно їх перенаправляючи, порівнюючи перед перемиканням коди відповідей, title, canonical і sitemap та стежачи за індексацією після нього.

Як оплачується робота?

Починаємо з аудиту й плану маршрутів. Далі — фіксований обсяг міграції або погодинно від $30/год. Якщо аудит покаже, що міграція не варта витрат, я скажу це прямо.

09 // related

// Перш ніж обрати стек

~/compare/adr-nuxt-vs-vue.mdNuxt чи Vue: що краще підходить вашому продуктуЧесне порівняння SPA на Vue + Vite і застосунку на Nuxt — рендеринг, SEO, серверний шар та інтерактивний архітектурний порадник.~/compare/nuxt-vs-vue →

git push --message

Думаєте перенести SPA на Vue до Nuxt?

Надішліть посилання на застосунок і одне речення про те, що не працює. Я відповім протягом робочого дня — і чесно скажу, якщо міграція не варта витрат.

Обговорити проєкт →cd ../services · Усі послуги

Міграція SPA на Vue до Nuxt без початку з нуля.

Аудит міграції

План рендерингу для маршрутів

Маршрутизація і layouts

Отримання даних

SEO-шар

Код, безпечний для SSR

Аудит

План маршрутів