Nuxt•3mo ago

Dynamic Subdomain Support in Nuxt3

I'm working on implementing dynamic subdomain handling in Nuxt by using a router.options file, as described in this article https://zernonia.keypress.blog/why-keypress. However, I'm facing an issue where the platform page doesn't render correctly when a user visits it through a subdomain, it shows the error 404 page not found: /. I rather don't want to use the nuxt-multi-tenancy package. https://github.com/hieuhani/nuxt-multi-tenancy

export default <RouterOptions>{
  routes: (_routes) => {
    const { ssrContext } = useNuxtApp()
    let subdomain = useRequestEvent()?.context?.subdomain
    if (ssrContext?.event.context.subdomain) subdomain = ssrContext?.event.context.subdomain

    if (subdomain) {
      const userRoute = _routes.filter((i) => i.path.includes("/platform/:platformUrl"))
      const userRouteMapped = userRoute.map((i) => ({
        ...i,
        path: i.path === "/platform/:platformUrl" ? i.path.replace("/platform/:platformUrl", "/") : i.path.replace("/platform/:platformUrl/", "/"),
      }))

      return userRouteMapped
    }
  },
}

export default <RouterOptions>{
  routes: (_routes) => {
    const { ssrContext } = useNuxtApp()
    let subdomain = useRequestEvent()?.context?.subdomain
    if (ssrContext?.event.context.subdomain) subdomain = ssrContext?.event.context.subdomain

    if (subdomain) {
      const userRoute = _routes.filter((i) => i.path.includes("/platform/:platformUrl"))
      const userRouteMapped = userRoute.map((i) => ({
        ...i,
        path: i.path === "/platform/:platformUrl" ? i.path.replace("/platform/:platformUrl", "/") : i.path.replace("/platform/:platformUrl/", "/"),
      }))

      return userRouteMapped
    }
  },
}

3 Replies

patchamammaOP•3mo ago

I've fixed this problem by changing the (replace) path param name, example: .../:platformUrl should be .../:platformUrl()

path: i.path === "/platform/:platformUrl()" ? i.path.replace("/platform/:platformUrl()", "/") : i.path.replace("/platform/:platformUrl()/", "/"),

path: i.path === "/platform/:platformUrl()" ? i.path.replace("/platform/:platformUrl()", "/") : i.path.replace("/platform/:platformUrl()/", "/"),

Alexi•2mo ago

@patchamamma I was facing the same issue and ended up doing the same. After this change, have you tried to pre-render subdomain pages? I see an issue, where it is okay to pre-render all the pages for Nuxt project, but not the subdomain pages.

patchamammaOP•2mo ago

@Alex I'm not planning to pre-render my project, but I did try it, and it works, as long as I’m not using dynamic data based on the subdomain. For example, if I try to return a 404 error when a vendor cannot be found, like this:

const {data, error} = await useFetch(`http://localhost:4000/vendor/${subdomain.value}`)
if (!data.value) {
    throw createError({ statusCode: 404, statusMessage: 'Page not found' });
}

const {data, error} = await useFetch(`http://localhost:4000/vendor/${subdomain.value}`)
if (!data.value) {
    throw createError({ statusCode: 404, statusMessage: 'Page not found' });
}

this will of course result in an error during the npx nuxi generate process.

Gaming

Programming

Dynamic Subdomain Support in Nuxt3