Dynamic base href for one app and multiples domains path
Hi.
I'm researching frameworks that meet my requirements.
And the most important one is the ability to handle dynamic base href.
I need to serve the same app on multiple domains.
When clients hire us they will point some url from their domains to us.
It could be anything like
So we have to have a SSR application that will serve the home page on any of those domains.
One instance of the app should handle all of those urls.
The problem is that in all SPA framework (SSR or not) the base href is handled statically, you build your app with that static path and when the app load in the browser it verifies if is in the correct base href, some frameworks don’t do nothing and just break (trying to load resources from root) or reloads the page to the specific statically builted base href.
What is ok if you are in a domain with the statically built base href, but it breaks for all other clients that have a different base href or are in the root.
Another important feature would be dynamically loaded components.
Some clients on their home page can have a carousel and others not, but that I know that vue can do.
I guess that one example of this behavior is shopify, you can point your own domain in many ways and it works.
But as far as I know they don’t use SPA.
Is this possible with Nuxt?
Thanks.
2 Replies
Hi @Mateus Silva. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Nuxt does support deploying the same SSR application under different base paths (subdirectories) and on multiple domains, but there are important caveats and some limitations based on the information in the knowledge sources.
Dynamic
baseURL
Handling
Nuxt allows you to set a static app.baseURL
in your nuxt.config.js
, which is used to prefix all routes and static assets. This is commonly used when deploying your app under a subdirectory, such as /store
or /shop
(Nuxt 3 Production in Apache2 with subdirectory). For example:
However, this value is static at build time. If you want to serve the same app under different base paths (e.g., /store
, /shop
, /other-path
) for different clients, Nuxt does not natively support a fully dynamic baseURL
that changes per request at runtime. The baseURL
is baked into the build, so you would typically need to build and deploy a separate instance for each base path.
There are workarounds, such as using a reverse proxy (like Apache or Nginx) to rewrite URLs and serve the app under different paths, but this can get complex and may not solve all issues, especially with client-side routing and asset loading. If the baseURL
is not set correctly, assets may be loaded from the wrong location, or navigation may break (Nuxt 3 Production in Apache2 with subdirectory).
Multiple Domains
Serving the same Nuxt app on multiple domains (e.g., client1.com
, client2.com
) is possible, as Nuxt itself does not restrict the domain. The main challenge is handling the base path for each domain if they differ. If all clients use the root (/
), this is straightforward. If they use different subdirectories, you run into the static baseURL
limitation described above.
Dynamic Components
Nuxt (and Vue) fully support dynamic components and conditional rendering, so you can show or hide features like a carousel per client as needed. This is not a limitation.
Summary
- Dynamic base href per request is not natively supported in Nuxt. The baseURL
is static at build time. Workarounds with proxies exist but are not seamless.
- Multiple domains are supported as long as the base path is consistent or you build per base path.
- Dynamic components are fully supported.
If your main requirement is a single SSR instance that can serve any arbitrary base path per request (like Shopify), Nuxt (as of the latest knowledge sources) does not provide this out of the box. You may need to consider custom server logic, multiple builds, or a different architecture if true runtime dynamic base paths are essential.
For more details on subdirectory deployment and baseURL, see the discussion and solutions here: Nuxt 3 Production in Apache2 with subdirectory.
If you have more specific requirements or want to discuss possible workarounds, feel free to ask!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@638515172205658180> Kapa.ai is still learning and improving, please let me know how I did by reacting below.