Nuxt 3 Multi-tenancy

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

Features · Demo · Quick Setup · Contributing

Features

⛰  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

Quick Setup

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 to be serving as https://jobs.nuxtdev.xyz/

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", "nuxtdev.xyz"],
    sites: ['jobs']
  },
})

5. 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", "nuxtdev.xyz"],
    customDomains: {
      "nuxtnews.com": "news"
    }
  },
})

Options

Configure Nuxt Multi-tenancy module with the multiTenancy property.

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

useTenant composition API

Use useTenant() to get the tenant ID

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

Development

# 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

Demo

You can view the demo at nuxtdev.xyz

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. For example: VueJobs
• An article detail page

Contributing

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

License

MIT License