Different routes for different subdomains in Nuxt.js

Question

Suppose there're two subdomains working for one nuxt instance. They should have different pages structure. For example it can be:

pages/
  index.vue // technical entry point that has some logic for determining what routes subtree should be used
  subdomain1/
    index.vue // entry point for subdomain1.mysite.com/
    page1.vue // entry point for subdomain1.mysite.com/page1
  subdomain2/
    index.vue // entry point for subdomain2.mysite.com/
    page1.vue // entry point for subdomain2.mysite.com/page1
    page2.vue // entry point for subdomain2.mysite.com/page2

The folder structure can be different. The goal is to be able to load different pages for different subdomains. subdomain1.mysite.com/page1 has to load one file (e.g. pages/subdomain1/page1.vue) while subdomain2.mysite.com/page1 has to load the other file (e.g. pages/subdomain2/page2.vue).

We can use nuxtServerInit action for determining the subdomain, so there's some this.$store.state.ux.subdomain variable that is eiter subdomain1 or subdomain2. But the rest is not clear for me.

Is it possible to achieve in nuxt.js? If it is, I suppose we should use named views <nuxt-child :name="subdomain"/> and extendRoutes in nuxt.config.js somehow, but I was not able to achieve it so far. Any help would be appreciated.

Answer 1

Yes, it is possible to handle multiple subdomains with nuxtJS. I have created a module k-domains for the same. you can try it or you can also achieve the same result by modifying the routes with the @nuxtjs/router module, check for the request.header.host and if it matches to your subdomain then filter the routes and remove the subdomain from the route.name and route.path

newRoutes = options.routes
      .filter(route => {
        // remove routes from other directories
        const toRemove = subdomains.filter(domain => {
          return domain != routesDirectory
        })
        return !isUnderDirectory(route, toRemove);
      })
      .map(route => {
        // remove directory from path and name
        if (isUnderDirectory(route, routesDirectory)) {
          return {
            ...route,
            path: route.path.substr(routesDirectory.length + 1) || "/",
            name: route.name.substr(routesDirectory.length + 1) || "index"
          };
        }
        return route;
      });

check this link for exact router.js code.
here is the project link and here is the npm module k-domains

Here's the link to the article for further explanation