Nuxt•7d 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
    }
  },
}

1 Reply

patchamamma•5d 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()/", "/"),

Gaming

Programming

Dynamic Subdomain Support in Nuxt3