Nuxt 3 Multi-tenancy

Nuxt Multi-tenancy is an open-source Nuxt 3 module that converts a single Nuxt application into a multi-tenant platform by mapping tenant subdomains and custom domains to dynamic page routes.

What is Nuxt Multi-tenancy?

Nuxt Multi-tenancy is a Nuxt 3 module (package name nuxt-multi-tenancy) that lets you serve different site content from one Nuxt app depending on the subdomain in the request URL. It takes a Nuxt project with a [site] dynamic folder under pages and a set of root domains as configuration, and it outputs the correct tenant pages for each incoming subdomain. The module is built for Nuxt 3 / Nitro, is maintained by hieuhani on GitHub, and is distributed under the MIT License.

Key Features

• Subdomain-based tenancy — Routes each tenant to a dynamic [site] page folder so every subdomain renders its own pages without extra server code.
• Multiple app sites in the pages folder — Supports several distinct Nuxt site trees inside the pages directory, each serving as an independent tenant.
• Custom domain mapping — The customDomains configuration option maps a domain like nuxtnews.com to a tenant route such as news.
• System sites — The sites option registers fixed routes (for example a jobs page) as subdomain-serving system pages.
• Root domain configuration — rootDomains tells the module which domains are production or development roots for tenant resolution.
• Preview environment support — Disabling strictSubdomains allows temporary hoster preview domains with extra subdomains to resolve to the first subdomain as tenant.
• Composable API — The useTenant() composable provides the current tenant ID anywhere in the Nuxt app.
• Sample playground — A fully functional sample playground is deployed on Vercel and includes a home page, tenant detail pages, and article detail pages.

Who is it for?

• SaaS founders — Build product deployments where each customer receives a branded subdomain such as customer.yourplatform.com, with tenant-specific pages created under the [site] folder.
• Agencies and freelancers — Host several client websites from a single Nuxt codebase, distinguishing each client by subdomain and optionally assigning custom domains.
• Nuxt developers — Add multi-tenancy to an existing Nuxt 3 project with a module instead of hand-rolling subdomain parsing and route resolution.

What can you do with Nuxt Multi-tenancy?

• Launch multi-tenant SaaS apps: Give each organization its own subdomain, and use the useTenant() composable to fetch tenant-specific data throughout the UI.
• Run multiple client sites from one deployment: Use the sites array for system subdomains like jobs.example.com and the customDomains map to point client domains to their tenant routes.
• Support hoster preview environments: Set strictSubdomains to false so temporary preview URLs with random subdomains still map to the intended tenant.

How does Nuxt Multi-tenancy work?

Install the dependency with pnpm, yarn, or npm, then add nuxt-multi-tenancy to the modules array in nuxt.config.ts. Create a [site] directory under pages and optionally configure the multiTenancy property with rootDomains, sites, customDomains, and strictSubdomains. The module's useTenant() composable then exposes the resolved tenant ID to the rest of the app.

Pricing

The module is open source under the MIT License and is free to use in both development and production.

FAQ

How do I install Nuxt Multi-tenancy?

Install the nuxt-multi-tenancy package as a dev dependency using pnpm, yarn, or npm, then add it to the modules array in your nuxt.config.ts file. After that, create a [site] folder under pages to define dynamic tenant routes.

Does Nuxt Multi-tenancy support custom domains?

Yes. Use the customDomains option in the multiTenancy configuration with a map from a domain to a tenant route. For example, you can map nuxtnews.com to a news route so visitors on that domain see the news tenant pages.

Can I use Nuxt Multi-tenancy with preview environments?

Yes. If your hoster provides temporary preview domains with extra subdomains, set strictSubdomains to false. The module then uses only the first subdomain as the tenant and does not require an exact subdomain plus root-domain match.

How do I get the current tenant ID in my app?

Import useTenant from the Nuxt auto-imports and call it in any setup context. It returns the tenant ID resolved from the current subdomain or custom domain, which you can then use for API calls, content selection, or branding.