Wildcard subdomain routing with nuxt

Viewed 319

I'm relatively new to Nuxt and I'm trying to implement subdomain routing in my Nuxt app, so that a request to:-

mysubdomain.myapp.com is routed to myapp.com/groups/:slug
mysubdomain.myapp.com/<anything else>/ is routed to myapp.com/groups/:slug/<anything else>

where slug is the subdomain.

From what I can see, there are two possible ways to do this. Either extendRoutes in the nuxt config or by using my own router.js file. But I can't work out how get the subdomain into the route.

I've got something like this in my router.js:-

import Router from 'vue-router'

export function createRouter(ssrContext, createDefaultRouter, routerOptions) {
  const options = routerOptions || createDefaultRouter(ssrContext).options
  const hostname = ssrContext ? ssrContext.req.headers.host : location.host
  return new Router({
    ...options,
    routes: fixRoutes(options.routes, hostname.match(/[^.]*/)[0]),
  })
}

function fixRoutes(defaultRoutes, subdomain) {
  return (
    defaultRoutes
      .map((route) => {
        // TODO use the subdomain in here to route to /groups/:slug route

        return route
      })
  )
}

It feels like I'm close but I can't figure out this last bit. Is this even possible?!

0 Answers
Related