N
Nuxt•4w ago
lkjimy

Looking for good examples of multi tenant setup in Nuxt

Examples I'm looking for: my-saas.com/client1/app my-saas.com/client2/app ... 1. How to handle nuxt routing (considering the URL in the examples above) 2. How to deal with assets (path resolution for static and _nuxt) 3. A reverse proxy is necessary? Some resources: https://github.com/nuxt/nuxt/issues/31284 https://github.com/nuxt/nuxt/issues/32286 https://zernonia.keypress.blog/why-keypress (comment if you have more examples) Most examples seem to use subdomains, instead the url path for multi tenancy. I more detailed guide on Nuxt features used for this purpose would be appreciated.
GitHub
Support multi-tenancy routing · Issue #31284 · nuxt/nuxt
Describe the feature Hello, I'd like to support hostname based multi-tenancy in my nuxt3 app. Each tenant could choose a theme for their content. GET localtest.com/ => render pages/=/one-col...
GitHub
Route/URL rewriting should be a feature! · Issue #32286 · nuxt/nuxt
Describe the feature Just like NextJS, we too should have a way to actually rewrite, not just redirect, our URLs. Forexample, this is especially handy for multi tenancy, internationalization, and s...
Why KeyPress?
Out of my super busy schedule, I still couldn't helped myself to push new project! 😂 Let me introduce, KeyPress - A keyboard-first blogging platform. Challenge
2 Replies
kapa.ai
kapa.ai•4w ago
Hi @lkjimy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Setting up a multi-tenant Nuxt application using URL paths (e.g., my-saas.com/client1/app, my-saas.com/client2/app) is less commonly documented than subdomain-based approaches, but it is possible. Here’s a breakdown based on the available knowledge sources: --- 1. Routing for Multi-Tenancy via URL Path To support URLs like /client1/app, you need to ensure Nuxt’s router recognizes the tenant segment as part of the route. The recommended approach is to use dynamic routes in your pages/ directory: Example directory structure: 
pages/
  [tenant]/
    app.vue
pages/
  [tenant]/
    app.vue
This will generate a route like /[tenant]/app, where [tenant] is a dynamic parameter. You can access the tenant value in your page/component using the useRoute() composable: 
<script setup lang="ts">
const route = useRoute()
const tenant = route.params.tenant
</script>
<script setup lang="ts">
const route = useRoute()
const tenant = route.params.tenant
</script>
This allows you to load tenant-specific data or configuration as needed. For more complex scenarios, you can further nest routes or use additional dynamic segments. This approach is confirmed in the documentation and Stack Overflow discussions about dynamic routing in Nuxt 3 [Docs: Routing]. --- 2. Asset Path Resolution (Static & _nuxt) When serving your app from a subdirectory (e.g., /client1/app), you must configure Nuxt to generate asset URLs relative to that base path. This is done by setting the app.baseURL in your nuxt.config.ts: 
export default defineNuxtConfig({
  app: {
    baseURL: '/client1/app'
  }
})
export default defineNuxtConfig({
  app: {
    baseURL: '/client1/app'
  }
})
This ensures that static assets and the _nuxt directory are referenced correctly (e.g., /client1/app/_nuxt/entry.js). If you want to support multiple tenants, you may need to dynamically set the baseURL or use a build process per tenant. However, the knowledge sources do not provide a built-in way to dynamically change baseURL at runtime; it is set at build time [Stack Overflow: Nuxt 3 Production in Apache2 with subdirectory]. --- 3. Reverse Proxy Requirement A reverse proxy (like Apache or Nginx) is typically necessary to map incoming requests to the correct Nuxt app instance and to ensure that asset requests (e.g., /client1/app/_nuxt/…) are routed correctly. For example, with Apache, you might use: 
ProxyPass /client1/app <http://localhost:8080/client1/app>
ProxyPassReverse /client1/app <http://localhost:8080/client1/app>
ProxyPass /client1/app <http://localhost:8080/client1/app>
ProxyPassReverse /client1/app <http://localhost:8080/client1/app>
This setup ensures that all requests under /client1/app are forwarded to your Nuxt server, and asset paths resolve as expected. The reverse proxy is also useful for handling multiple tenants without running multiple Nuxt instances [Stack Overflow: Nuxt 3 Production in Apache2 with subdirectory]. --- Additional Considerations - Caching: If you use Nitro’s caching, be aware that by default, request headers (like host) are dropped. For multi-tenant setups, you may need to use the cache.varies option in your route rules to ensure cache separation per tenant [Docs: useRequestURL]. - Tenant-specific logic: Use the dynamic route parameter (tenant) to load tenant-specific configuration, assets, or data within your app. --- Summary:
- Use dynamic routes (pages/[tenant]/app.vue) for tenant path segments. - Set app.baseURL to match your subdirectory for correct asset resolution. - Use a reverse proxy to map URLs and serve assets correctly. - Consider Nitro cache configuration for tenant separation if using SSR caching. The knowledge sources do not provide a full, detailed guide or advanced examples for this exact use case, but the above steps are supported by the available documentation and community answers. If you need more advanced or dynamic baseURL handling, you may need to explore custom server logic or build processes, which are not covered in the current sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@126052960038944768> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?