Nuxt 3 Multi-tenancy module for building multi-tenant applications on Nuxt 3

Features · Demo · Quick Setup · Contributing

⛰ Multi-tenancy Nuxt dynamic tenant sites support by subdomains

🌻 Multiple Nuxt app sites in pages folder

🦄 Custom domain for each tenant route in pages folder

✨ A fully functional sample playground deployed on Vercel

1. Add nuxt-multi-tenancy dependency to your project

# Using pnpm
pnpm add -D nuxt-multi-tenancy
# Using yarn
yarn add --dev nuxt-multi-tenancy
# Using npm
npm install --save-dev nuxt-multi-tenancy

2. Add nuxt-multi-tenancy to the modules section of nuxt.config.ts

export default defineNuxtConfig({
 modules: [
 'nuxt-multi-tenancy'
 ]
})

3. If you want to use dynamic tenants, create [site] folder under your Nuxt pages directory, you can check the playground's pages folder for referencing.

That's it! You can now use Nuxt Multi-tenancy in your Nuxt app ✨

4. If you want to have some additional system sites to be serving as a sub domain, for example: jobs page

Configure the sites property to add the list of tenant you want to be serving as system sites.

export default defineNuxtConfig({
 modules: ['nuxt-multi-tenancy'],
 multiTenancy: {
 tenantDynamicRoute: 'site',
 rootDomains: ["nuxtdev.local", "techgoda.net"],
 sites: ['jobs']
 },
})

5. If you are using a hoster that provides preview environments with temporary domains including subdomains (e.g. jobs.project-name-hash.example-hoster.com), you can also disable the strict subdomain check, so only the first subdomain is used as the tenant (e.g. foo.bar.baz.dev → foo) and an exact match is not required (i.e. site + root domain).

export default defineNuxtConfig({
 modules: ['nuxt-multi-tenancy'],
 multiTenancy: {
 tenantDynamicRoute: 'site',
 rootDomains: ["nuxtdev.local", "techgoda.net", "example-hoster.com"],
 strictSubdomains: false
 sites: ['jobs']
 },
})

6. If you want to custom domain for each tenant route, configure the customDomains property a map with key of domain and value of mapping tenant route. For example: nuxtnews.com to news route.

export default defineNuxtConfig({
 modules: ['nuxt-multi-tenancy'],
 multiTenancy: {
 tenantDynamicRoute: 'site',
 rootDomains: ["nuxtdev.local", "techgoda.net"],
 customDomains: {
 "nuxtnews.com": "news"
 }
 },
})

Configure Nuxt Multi-tenancy module with the multiTenancy property.

export default defineNuxtConfig({
 modules: ['nuxt-multi-tenancy'],
 // default options
 multiTenancy: {
 tenantDynamicRoute: 'site',
 rootDomains: ["nuxtdev.local", "techgoda.net"],
 strictSubdomains: true,
 sites: [],
 customDomains: {},
 },
})

Use useTenant() to get the tenant ID

import { useTenant } from '#imports'
const tenant = useTenant()

# Install dependencies
yarn install
# Generate type stubs
yarn dev:prepare
# Develop with the playground
yarn dev
# Build the playground
yarn dev:build
# Run ESLint
yarn lint
# Run Vitest
yarn test
yarn test:watch
# Release new version
yarn release

You can view the demo at techgoda.net

Features:

• A home page to list top first 30 articles from dev.to
• Tenant detail page. For example: The Dev Team organization
• A custom static tenant page.
• An article detail page

• Open an issue if you believe you've encountered a bug with the module.

MIT License