Hi 👋

I have a Nuxt 4 project with user slugs, like: http://localhost:3000/@alexlitcher

And a folder structure like:

- app
 - pages
   - @[slug].vue

The app runs in SSR mode.

I’d like to proxy subdomains to these user pages, for example:
http://alexlitcher.localhost:3000 → proxies to http://localhost:3000/@alexlitcher

So I created a server/middleware/subdomain.ts:

export default defineEventHandler(async (event) => {
  const hostname = getRequestHost(event)
  const subdomain = getSubdomain(hostname.toString())

  event.context.subdomain = subdomain

  const url = new URL(`https://localhost:3000/@${subdomain}`)

  return await $fetch(url.toString(), {
    method: event.node.req.method,
    headers: event.node.req.headers,
    body: readRawBody(event)
  })
})

This works perfectly on the server —
http://alexlitcher.localhost:3000 correctly renders the http://localhost:3000/@alexlitcher page.

However, when hydration happens on the client, the URL becomes:

http://alexlitcher.localhost:3000/@alexlitcher
                                 ^

If JavaScript is disabled, everything works fine.
But when JS enabled, the redirect append the /@alexlitcher to the url after hydration.

Why does this happen, and what’s the proper way to handle this kind of subdomain → route mapping in Nuxt 4?

I already tried the router.options.ts method (#16536 (comment)) as mentioned by @TheAlexLichter, but it's not satisfying because it's more difficult to handle cache with Netlify / Vercel / Cloudflare. (especially because you need to set Cache Tags or Vary headers, and each company has his own implementation and limitations, and it's a full nightmare!)

Thanks a lot for your help🙏