Handling subdomains in Nuxt 3

[konradsienkowski]

Hey,

In my application, I'd like to have some of the routes/pages on a different subdomain. Most of the articles about handling multiple subdomains in one Nuxt app require @nuxtjs/router module which is not compatible with Nuxt 3 (at least at the moment).

Is there any other way to tackle that?

[manniL]

While you can't replace the full router, routes and history are modifiable via app/router.options.ts nuxt/framework#7129. (or pages via pages:extend hook).

[konradsienkowski]

@manniL Could you elaborate on how to use the router.options.ts or pages:extend hook to add subdomains to the project? Sorry for bothering but it's the only thing blocking us from going into production with our Nuxt 3 app

[FileSoft-us]

@manniL Could you elaborate on how to use the router.options.ts or pages:extend hook to add subdomains to the project? Sorry for bothering but it's the only thing blocking us from going into production with our Nuxt 3 app

I have same problem... hopefully have the best solution... and share here....

[MahsaGoudarzi]

@manniL Hello, Do we have any update for this issue ?

[danielroe]

See https://zernonia.keypress.blog/why-keypress

[MahsaGoudarzi]

@danielroe Many thanks, I created this repo to just setup a simple project use nuxt 3 - vuetify 3 and also custom router for supporting dynamic subdomain, for anyone who's looking for :
https://github.com/MahsaGoudarzi/subdomain-nuxt3

[FileSoft-us]

hai @danielroe @MahsaGoudarzi and all

Hai I just need a simple all routing same like index page

subdomain1 (folder pages)
-[slug]
--index.vue
--other.vue
-index.vue

const userRoute = _routes.filter((i) => i.path.includes(subdomain.value))

here's my problem RegEx replace... I want suddomain1 based on subdomain.value
path: i.path.replace(/subdomain1?(\/)?/g, ''),

what is the best practice dynamically to replace both /subdomain.value and /subdomain.value/ to '/'

[tasiotas]

thats very cool solution!
but once I am in http://subdomain1.localhost:3000 and use <NuxtLink to="/">home</NuxtLink>

it links to http://subdomain1.localhost:3000 rather then http://localhost:3000.

any ideas how to have NuxtLink ignore subdomain1?

thank you

[tasiotas]

so far I came up with this idea. meh...

<NuxtLink :href="useHref('/')">

composables/href.js

export const useHref = (path) => {
  return process.env.DOMAIN + path
}

[MahsaGoudarzi]

@danielroe @SoftLaza @tasiotas
Hi again, I updated this repo : https://github.com/MahsaGoudarzi/subdomain-nuxt3
Now with entering this -> "subdomain1.host.com " it redirects us to page pages/subdomain1/index.vue
and "subdomain1.host.com/about" it redirects to page pages/subdomain1/about.vue

based on what user entered in url

I hope it solve the issue, and if you have better idea about implementing please let's communicate more <3

[lowbits]

@MahsaGoudarzi Hey, yes, I think it's working but event.req.headers.host is deprecated, const headers = getHeaders(event) is the new way to go.

[AloisSeckar]

@MahsaGoudarzi const headers = getHeaders(event) is the new way to go.

either that, or you can also use event.node.req.headers.host

[MahsaGoudarzi]

@lowbits @AloisSeckar Many thanks, I updated it 👽

[Aranwaolu]

Hi @MahsaGoudarzi. I followed your solution and it works very well. The issue I have is vue router breaks when I use NuxtLink or the browser's page navigation buttons (both, back and forward). But when I refresh the tab or enter the url directly, it works fine

I would be glad if you could help me, or at least point me in the right direction. Thanks

[Youhan]

Note: Since the prerender happens in localhost as hostname, it may not find some page, hence, build error. In the implementation, we are manipulating the _routes array and depending on the situation some prerender routes may be changed for localhost

[Aranwaolu]

Hi there!

I used the solutions suggested here as a guideline for setting up subdomains in my nuxt 3 app. But I am currently facing an issue where vue router breaks when I navigate the subdomain pages using NuxtLink. Although, the intended page shows on refresh of the browser tab

I would be glad if I could be pointed in the direction of a fix for this. Thank you

[MahsaGoudarzi]

@Aranwaolu Hey there, I'm trying to figure it out what's the issue seems just sometimes happens for me that it's laggy!
BTW as your mesage is for couple of month ago, could you solve it ?

[pitambar-jha]

Hey,

In my application, I'd like to have some of the routes/pages on a different subdomain. Most of the articles about handling multiple subdomains in one Nuxt app require @nuxtjs/router module which is not compatible with Nuxt 3 (at least at the moment).

Is there any other way to tackle that?

Hello,
I have been using subdomains and multiple top level domains on my nuxt app since v3 was in beta. it is very much possible to do so.
There are two parts to it:

1. Code that enables this in the nuxt app
2. Reverse proxy + server config that secures this setup

Code that enables this in the nuxt app:
The way i do it is by using a composable to fetch the subdomain slug from the host headers and then checking that slug against the api backend to validate it. You may want to convert this composable to a plugin depending on your use case and the number of pages in your app. The composable can look like this:

export const getSlug = function getSubdomain() {
    let slug = ""
    let host = ""
    const headers = useRequestHeaders()
    if (process.server) {
        host = headers["host"]
    } else {
        host = window.location.host
    }
    let subdomainArr = host.split(".")

    if ((subdomainArr.length == 3) || (subdomainArr.length == 2)) {
        slug = subdomainArr[0]
    } 
    else {
        throw createError({ statusCode: 404, statusMessage: "Page Not Found" })
    }
    return slug
}

Then in your page module you can check if the returned slug is valid or not.

let slug = getSlug()

// if you are using a static subdomain. the check can look like this:

if (slug != 'Myslug') {
    throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}

// if you want this check to be dynamic then you can get do a fetch call and run a check based on the response. This would also work for dynamic routes on subdomains or multiple top level domains

const { data: siteDetails, pending } = await useFetch("apiEndpoint+slug")

In your case i think you want only some specific routes to be served on the subdomain. for that you can simply put another check in the composable itself or convert the composable into a plugin and put an additional check using useRouter()

Note: the composable i suggested allows for subdomains and top level domains to co-exist you can disable that based on your requirement.

Server config that secures this setup
This would vary based on the use case, the deployment architecture and the scale of the app but essentially boils down to two things:

1. If you are using apis then ensuring that CORS is setup correctly to incorporate the subdomains and domains the app will be running on (the api backend needs to handle dynamic CORS awareness)
2. Ensuring that the reverse proxy and the app server is aware of the domains/subdomains that the app is supposed to be served on and only allows those domains to be served.

If you are not using dynamic subdomains and top level domains then putting in these checks becomes much simpler.

I have used this setup with edge deployments on cloudflare workers, standard vanilla setup on nginx + node deployments and kubernetes.

Hope this helps people that are trying to run subdomains and multiple custom domains on nuxt 3.

[Andrey1906]

@MahsaGoudarzi Hello. Does the code in your repository support nested denamic route?
https://github.com/MahsaGoudarzi/subdomain-nuxt3
Example: http://myDomain.localhost:3000/users/1 ?

  const routed = userRoute.map((i) => ({
    ...i,
    path: page
      ? i.path === `/${subdomain}/${page}`
        ? i.path.replace(`/${subdomain}/${page}`, `/${page}`)
        : i.path.replace(`/${subdomain}/${page}/`, `/${page}`)
      : i.path === `/${subdomain}`
      ? i.path.replace(`/${subdomain}`, '/')
      : i.path.replace(`/${subdomain}/`, '/'),
  }));
  
  For this piece it’s not very clear whether there is support or not

[Nisthar]

Any update on this? Found this https://github.com/hieuhani/nuxt-multi-tenancy
@MahsaGoudarzi what would be the difference between this and your example?

[lowbits]

Did you try it?
The solution you shared has @danielroe as a contributor, in fact he just adjust an import, but he had an eye on that repo.
So i guess, the provided solution is not that bad.
Probably i would go with their solution and contribute, so everyone has advantages.

The difference and in my eyes advantage is: nuxt-multi-tenancy is a module, you can import.
The solution here is a boilerplate of nuxt3.

[Nisthar]

@lowbits no i think the module only use a single folder for route matching Right? so for different subdomains, i would have to use a single folder [site] and check the hostname for each tenant inside the templates.

[Youhan]

I ended up refactoring out the tenant part out of the main app. Now I have 2 projects on Vercel on a monorepo.
The main app is for marketing, blogs, and dashboards for tenants.

• The tenant app accepts *.domain.com and shows tenant websites/profiles.

I am not using any module though. The tenant app checks the subdomain or a custom domain against the database, and sets it in Nitro context and then on every route request we can fetch the correct tenant using the context.

[Nisthar]

Can you share your code?

[Youhan]

Sure. The code is private but I can sudo-code it for you here.

As I mentioned earlier, this is developed for an app that it's only function is to show the contents of the tenant (a profile, a website, a blog, etc) and can be hit using https://tenant1.mysite.com or custom domains (if you use them). The https://mysite.com has another nuxt app. In my case, both apps extend a shared nuxt app that provides UI and shared APIs.

app.vue ( or any other page)

<script setup lang="ts">
const tenant = useTenant()
// and then use it

composabels/useTenant.ts

// import Tenant type
export default function () {
  return useState<Tenant | void >('tenant', () => {})
}

middleware/tenant.global.ts

export default defineNuxtRouteMiddleware(() => {
  const tenant = useTenant()

  if (!tenant.value)
    tenant.value = useRequestEvent()?.context?.tenant as Tenant
})

Here we are accessing the Nitro context to get the tenant.

server/middleware/tenant.ts

export default defineEventHandler(async (event) => {
  const currentURL = getRequestURL(event)
  event.context.tenant = await getTenant(event)
})

In the above code, we check the url and then figure out the tenant from it, it could be simple check and extract the subdomain or checking the url host against a database.
Note: this server middleware runs on all server requests, make sure you run the await getTenant(event) only when needed. Nuxt has many internal routes starting with __nuxt_ and also other modules can add server routes that will execute this.

Hope it helps.

[lord007tn]

import { getTenantFullData } from "@/query";
import tenantsCache from "@/cache/tenants";
export default defineEventHandler(async (event) => {
  const currentURL = getRequestURL(event);
  const host = currentURL.host;
  if (!currentURL.pathname.startsWith("/__")) {
    let tenant = tenantsCache.get(host);
    if (!tenant) {
      tenant = await getTenantFullData(host);
      tenantsCache.set(host, tenant);
    }
    event.context.tenant = tenant;
  }
});

This a more optimised version especially when getting a lot of data from the server, calling it on every request could harm performance

then if you want to update the cache you can either use TTL lets says after 1 day the cache will be deleted and on first request things will update

or my better approach is more tied to your backend
where you setup a worker that have a special header key
whenever you update something or things changes in database and you need to reflect those changes to your tenant

just send a get request with that special header that will just override the cache

ofc that depends always on your approach and the kind o data you are dealing with

[Youhan]

That's a good solution I think. Another way is to use defineCachedEventHandler for the API route that serves the tenant info and revalidate its cache using a query param or header key.

[Youhan]

or a nitro cached function https://nitro.unjs.io/guide/cache