Nuxt 3 multiple domains/projects

Question

I am building a Nuxt 3 SSR application, which I'm getting rather familiar with. What I can't wrap my head around, if it's even possible, is to have a single Nuxt project for multiple domains. For example, I have a few websites such as websitea.com, websiteb.com, websitec.com, and want to keep pages separate, while sharing components, compostables, etc. I'm not sure if this is possible, but it would be greatly appreciated if anyone has any advice.

Answer 1

I had this requirement too and came up with this solution:

Everything is shared as one Nuxt 3 app with a single nuxt.config.ts. The only difference is that each app has it's own sub-directory within /pages.

Here's how I set it up:

• Create a pages structure like this:

/pages
--/website1
--/website2
--/website3

• Define an env variable like WEBSITE_ID (e.g. within your project's .env)

WEBSITE_ID="website1"

• Inside of nuxt.config.ts add this configuration:

export default defineNuxtConfig({
  //...
  dir: {
    pages: `pages/${process.env.WEBSITE_ID}`
  },
  //...
})

• When it's time to deploy your apps, inject the corresponding WEBSITE_ID env variable for each at build time.
• While in development, simply edit the WEBSITE_ID within the .env to switch which website you're working on.

This setup makes it so that for example, when website1 is active, pages/website1 is treated as the /pages directory... so pages/website1/index.vue would be resolved when requesting /.