// services
Vue SPA to Nuxt migration without starting over.
Your Vue application works, but its public pages arrive as an empty shell. Search engines and link previews see little, meta tags are set late in the browser, and every SEO fix becomes a workaround.
I move the application to Nuxt in planned steps — routes, data fetching, head management and rendering — keeping your components and your URLs. Public pages ship complete HTML; the private area keeps working as before.
01 // fit
This service is for you if…
- public pages of your Vue SPA are poorly indexed or show empty link previews;
- titles, descriptions and canonical URLs are set in the browser and behave unpredictably;
- you need localized landing pages with correct hreflang;
- routing and layouts in the SPA have grown complex and are hard to change;
- you need a server layer for an API proxy, forms or credentials that must not reach the browser;
- you want SSR or prerendering without rewriting the interface from scratch.
02 // scope
Scope of work
- scope/01
Migration audit
What moves as-is, what has to change and what should stay a client-side SPA — written down before any code moves.
- scope/02
Rendering plan per route
SSR, prerendering, cached rendering or client-only, set per route with Nuxt route rules.
- scope/03
Routing and layouts
Vue Router configuration mapped to pages/ and layouts/, with the same URLs or explicit redirects.
- scope/04
Data fetching
Browser-only API calls moved to useFetch / useAsyncData, without fetching the same data twice on hydration.
- scope/05
SEO layer
Titles, descriptions, canonical URLs, hreflang, sitemap and structured data rendered into the HTML.
- scope/06
SSR-safe code
Code that relies on window, document or localStorage, plugins and third-party libraries made safe for the server.
03 // diagram
What changes when a Vue SPA becomes a Nuxt application
The components stay. What changes is everything around them — how routes are defined, where data is fetched and who builds the HTML. Red lines are the typical SPA setup, green lines are the Nuxt equivalent.
index.html → <div id="app"></div>
server-rendered HTML for every public route
router/index.ts → hand-written routes
pages/ → file-based routes, same URLs
onMounted → fetch in the browser
useFetch → data loaded on the server
document.title set by script
useSeoMeta → title, canonical, hreflang in HTML
04 // pipeline.yml
How the work goes
- ~1 wkaudit:spa
Audit
Routes, data fetching, browser-only code and the current SEO state of the public pages.
→ migration plan - ~1 wkplan:routes
Route plan
Which routes become server-rendered, prerendered or stay client-only; URL map and redirects; estimate.
→ route map & estimate - weeksmigrate:incremental
Migration
Routing, data fetching, head and plugins moved in small steps; existing components reused. Weekly demos on staging.
→ Nuxt app on staging - ~1 wkverify:parity
Parity check
Old and new versions compared: URLs, status codes, titles, canonical, sitemap and performance.
→ release checklist - per releasedeploy:switch
Switch
Production switch through CI/CD with redirects and a rollback path, then monitoring of indexing.
→ live Nuxt app
05 // outcomes
What you can expect
- Public pages return complete HTML with content, meta tags and real links.
- The same URLs as before, or explicit redirects — no silently lost pages.
- Your Vue components reused instead of rewritten.
- A clear split between server-rendered, prerendered and client-only routes.
- A documented setup and deployment for the new runtime.
06 // stack
Technology involved
Your Vue 3 components stay; Nuxt takes over routing, data fetching, head management and the build. A Vue 2 project needs the Vue 3 upgrade first — it can be planned as part of the same work.
07 // evidence
Where I have done this before
Nuxt with server rendering is what I build public products on — including this site.
- This site: Nuxt 4 with prerendered SSR pages, three languages, hreflang and structured data.
- At Right Information: SSR features in a Yii2 / Nuxt 3 monorepo while keeping compatibility with the legacy platform.
- In the Domodessa and Thailand rental projects the public site is Nuxt, while the admin stays a separate Vue (Quasar) application — the same split a partial migration produces.
Related case studies
- c51e8aaReal-estate platform — domodessa.comNuxt 4 with SSR in production: Docker networking, SSR and hydration issues resolved so the app behaves the same locally and in production.
- 0d2f6b3PsyLife.me — personal practice platformA multilingual Nuxt 4 platform with a blog/CMS, consultation booking and a separate NestJS API.
08 // faq
Questions clients ask first
Do we have to rewrite our components?
Usually not. Vue 3 single-file components move to Nuxt largely as they are. The changes concentrate in routing, data fetching, head management and code that touches browser-only APIs.
Our application is still on Vue 2. Can it be migrated?
Yes, but current Nuxt requires Vue 3, so the Vue 3 upgrade comes first. Both steps can be planned as one project and delivered in stages.
Can we migrate only the public part?
Yes, and it is often the most sensible option: public routes move to Nuxt, while the private area stays a Vue SPA or becomes client-only routes inside Nuxt.
Will the migration improve our rankings?
It removes technical obstacles: content, meta tags and links are in the first response. Rankings still depend on content, links and competition, so I do not promise positions.
How do you avoid losing traffic during the switch?
By keeping URLs the same or redirecting them explicitly, comparing status codes, titles, canonical URLs and the sitemap before the switch, and watching indexing after it.
How is the work billed?
It starts with an audit and a route plan. After that, either a fixed scope for the migration or hourly from $30/h. If the audit shows migration is not worth it, I say so.
09 // related
Related services
- nuxt.config.tsNuxt & Vue developmentSSR, SEO, performance, API integrations and complex interfaces — Vue and Nuxt applications built to run in production, not just in a demo.Nuxt & Vue development for production products →
- legacy.phpLegacy PHP & Vue maintenanceYour PHP or Vue application still runs the business, but nobody wants to touch it. I stabilize it, document it and get development moving again.Legacy PHP & Vue maintenance and stabilization →
// Before you choose a stack
git push --message
Thinking about moving your Vue SPA to Nuxt?
Send a link to the application and a sentence about what is not working. I reply within one working day — and tell you honestly if a migration is not worth it.