Subdomain routing about router-module HOT 13 OPEN

Here is solution using @nuxt/router-module

All pages from folder 'pages/root-domain' will be available on 'example.com'
All pages from folder 'pages/sub-domain' will be available on 'foo-bar.example.com'
All other pages will be available on any domain

// router.js

import Router from 'vue-router'

export function createRouter(ssrContext, createDefaultRouter, routerOptions) {
  const options = routerOptions || createDefaultRouter(ssrContext).options

  let routesDirectory = null

  if (process.server && ssrContext && ssrContext.nuxt && ssrContext.req) {
    const req = ssrContext.req

    const domainLevel = (req.headers.host.match(/\./g) || []).length + 1

    // Get routes directory by hostname

    routesDirectory = domainLevel > 2 ? 'sub-domain' : 'root-domain'
    // Save to the object that will be sent to the client as inline-script
    ssrContext.nuxt.routesDirectory = routesDirectory
  }
  if (process.client) {
    // Get what we saved on SSR
    if (window.__NUXT__ && window.__NUXT__.routesDirectory) {
      routesDirectory = window.__NUXT__.routesDirectory
    }
  }

  function isUnderDirectory(route, directory) {
    const path = route.path
    return path === '/' + directory || path.startsWith('/' + directory + '/')
  }

  let newRoutes = options.routes
  if (routesDirectory) {
    newRoutes = options.routes
      .filter((route) => {
        // remove routes from other directories
        const toRemove =
          routesDirectory === 'sub-domain'
            ? 'root-domain'
            : 'sub-domain'
        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
      })
  }

  return new Router({
    ...options,
    routes: newRoutes
  })
}

from router-module.

Hello @Aperrix, I've created a module to handle multiple subdomains with nuxtJS, inspired by the answer of @verstoff but not limiting to just one subdomain, you can add any number of domains, please have a look k-domains thanks @verstoff for the initial idea.

from router-module.

The problem is your going to solve the problem only with nuxt but what you actually need is reverse proxy.
you can use nginx for instead.

from router-module.

Hello, I've followed this guide and all seem to work perfectly on localhost. However when I deploy using nuxt-generate it seems that it shows always the root-domain and never the sub-domain this is probably because they get generated without subdomain and then this never runs again. Is there a way to have something like this which works with nuxt generate? Any workaround I can try?

from router-module.

Here is solution using @nuxt/router-module

All pages from folder 'pages/root-domain' will be available on 'example.com' All pages from folder 'pages/sub-domain' will be available on 'foo-bar.example.com' All other pages will be available on any domain

// router.js

import Router from 'vue-router'

export function createRouter(ssrContext, createDefaultRouter, routerOptions) {
  const options = routerOptions || createDefaultRouter(ssrContext).options

  let routesDirectory = null

  if (process.server && ssrContext && ssrContext.nuxt && ssrContext.req) {
    const req = ssrContext.req

    const domainLevel = (req.headers.host.match(/\./g) || []).length + 1

    // Get routes directory by hostname

    routesDirectory = domainLevel > 2 ? 'sub-domain' : 'root-domain'
    // Save to the object that will be sent to the client as inline-script
    ssrContext.nuxt.routesDirectory = routesDirectory
  }
  if (process.client) {
    // Get what we saved on SSR
    if (window.__NUXT__ && window.__NUXT__.routesDirectory) {
      routesDirectory = window.__NUXT__.routesDirectory
    }
  }

  function isUnderDirectory(route, directory) {
    const path = route.path
    return path === '/' + directory || path.startsWith('/' + directory + '/')
  }

  let newRoutes = options.routes
  if (routesDirectory) {
    newRoutes = options.routes
      .filter((route) => {
        // remove routes from other directories
        const toRemove =
          routesDirectory === 'sub-domain'
            ? 'root-domain'
            : 'sub-domain'
        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
      })
  }

  return new Router({
    ...options,
    routes: newRoutes
  })
}

this is not working when using nuxt-i18n module.

from router-module.

@Aperrix can you share your code for subdomain nuxt router.

from router-module.

@verstoff is there a way how to make your code work in a more general way.
Let's say I have more domains/subdomains that I want to map on more directories.

page/admin.domain.com > will show only on the subdomain admin.domain.com
page/example.com > will show only on the domain example.com
page/anotherpage.com > will show only on the domain anotherpage.com
page/subdomain.example.com > will show only on the subdomain.example.com

Therefore I can have multiple domains and subdomains pointing on one server with one NuxtJS SSR app.

THX

from router-module.

@tomasSlouka

There is two steps:

1. Determine which directory is needed for the requested domain:
   routesDirectory = req.headers.host suitable for your purposes
2. Exclude all routes that matches your domain directories (except current one - routesDirectory) from routes list.
   For your purposes change filter method to something like this:

const domains = [
   'admin.domain.com', 'example.com', 'anotherpage.com', 'subdomain.example.com'
]

...

newRoutes = options.routes.filter((route) => {
        if (isUnderDirectory(route, routesDirectory)) {
            return true
        }
        // remove routes from other domain-directories
        return !domains.find(domain => isUnderDirectory(route, domain))
})

Or you can define some prefix for domain-directories and filter routes by it.

from router-module.

This is almost exactly what I need for my app. I'm trying to replicate the method that heroku uses on their site.

I am aiming for 2 domains - example.com and dashboard.example.com. The idea is that if an unauthenticated user goes to dashboard.example.com, they are forced to log in first - at example.com/login - then they're redirected to the main dashboard page.

Using @verstoff's solution above, I managed to get the subdomains working (although I needed to change the domainLevel check to 1, from 2) but if I put the auth middleware on the dashboard page (to force a user login), I can't get it to go to example.com/login.

• If I put the login.vue page in the root of the pages directory (pages/login.vue), the login page is dashboard.example.com/login. It looks like Heroku does this - then that page redirects to the real login page (which is at id.heroku.com) but how would I go about that, without just hardcoding the url?
• If I put the login.vue page in the root-domain (pages/root-domain/login.vue), the login page is not found.

Any ideas?

from router-module.

@bodgerbarnett

In order not to hardcode, you can get domain of the authorization page using string methods or regular expressions, knowing the required domain level and req.headers.host. Then save the result somewhere, for example, in ssrContext.nuxt.loginURL (like in my answer), which is available both on the server and on the client (via a global variable). In the middleware, get this variable and redirect to the resulting domain instead of current.

Make sure the redirection happens through 30x code on the server and through location on the client (with a page reload and not just a Vue Router route change).

from router-module.

Thanks @verstoff - I used the runtime config to do that in the end, so thanks for that!

from router-module.

Here is solution using @nuxt/router-module

All pages from folder 'pages/root-domain' will be available on 'example.com'
All pages from folder 'pages/sub-domain' will be available on 'foo-bar.example.com'
All other pages will be available on any domain

// router.js

import Router from 'vue-router'

export function createRouter(ssrContext, createDefaultRouter, routerOptions) {
  const options = routerOptions || createDefaultRouter(ssrContext).options

  let routesDirectory = null

  if (process.server && ssrContext && ssrContext.nuxt && ssrContext.req) {
    const req = ssrContext.req

    const domainLevel = (req.headers.host.match(/\./g) || []).length + 1

    // Get routes directory by hostname

    routesDirectory = domainLevel > 2 ? 'sub-domain' : 'root-domain'
    // Save to the object that will be sent to the client as inline-script
    ssrContext.nuxt.routesDirectory = routesDirectory
  }
  if (process.client) {
    // Get what we saved on SSR
    if (window.__NUXT__ && window.__NUXT__.routesDirectory) {
      routesDirectory = window.__NUXT__.routesDirectory
    }
  }

  function isUnderDirectory(route, directory) {
    const path = route.path
    return path === '/' + directory || path.startsWith('/' + directory + '/')
  }

  let newRoutes = options.routes
  if (routesDirectory) {
    newRoutes = options.routes
      .filter((route) => {
        // remove routes from other directories
        const toRemove =
          routesDirectory === 'sub-domain'
            ? 'root-domain'
            : 'sub-domain'
        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
      })
  }

  return new Router({
    ...options,
    routes: newRoutes
  })
}

I added this in my Nuxt directory and it doesn't do anything for me.

Is there anything else needed for this to work?

from router-module.

createDefaultRouter

I am getting createDefaultRouter is not a function error, any idea why? is this code need to be updated?

from router-module.