N
Nuxt6mo ago
psycarlo

Nuxt Server: Rewrite

Is there something like https://nextjs.org/docs/app/api-reference/functions/next-response#rewrite for nuxt, so we can build Multi-tenant Custom subdomains with nuxt & vercel (Next example: https://www.youtube.com/watch?v=vVYlCnNjEWA) Thanks in advance!
30 Replies
kapa.ai
kapa.ai6mo ago
Hi @psycarlo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt does not have a direct equivalent to Next.js's nextResponse.rewrite for dynamic, runtime URL rewriting at the server level. However, Nuxt provides several features that can help you implement multi-tenant architectures and custom subdomain handling, especially when deploying to platforms like Vercel: 1. Route Rules & Redirects
Nuxt's routeRules allow you to define server-side redirects and other behaviors per route in your nuxt.config.ts. For example, you can set up redirects, SSR toggling, caching, and more. However, these are primarily for static path-based rules, not dynamic rewrites based on runtime logic or headers like hostnames or subdomains. Example:
export default defineNuxtConfig({
routeRules: {
'/old-page': { redirect: '/new-page' }
}
})
export default defineNuxtConfig({
routeRules: {
'/old-page': { redirect: '/new-page' }
}
})
This handles static redirects, not dynamic rewrites based on subdomain or request headers.
Hybrid Rendering & Route Rules 2. Server Middleware
You can use server middleware to intercept requests and implement custom logic, such as inspecting the Host header for subdomain-based routing. In Nuxt 3, you can add server middleware in the server/middleware directory or via addServerHandler in a module. Middleware can perform redirects, but true rewrites (changing the URL internally without redirecting the client) are not natively documented for Nuxt as they are in Next.js. Example of a redirect middleware:
// server/middleware/redirect.ts
export default defineEventHandler((event) => {
const host = event.req.headers.host
// Custom logic based on host/subdomain
// You can use sendRedirect(event, '/new-path') for redirects
})
// server/middleware/redirect.ts
export default defineEventHandler((event) => {
const host = event.req.headers.host
// Custom logic based on host/subdomain
// You can use sendRedirect(event, '/new-path') for redirects
})
Server Endpoints & Middleware 3. Vercel Platform Support
Nuxt's Nitro engine supports deployment to Vercel and can leverage Vercel's platform features. However, dynamic rewrites based on subdomain (like Next.js's rewrite) are not explicitly documented in Nuxt's official docs. You may need to use Vercel's own configuration (vercel.json) for advanced routing and rewrites at the edge. Summary:
While Nuxt offers powerful routing, middleware, and deployment flexibility, there is no direct, documented equivalent to Next.js's nextResponse.rewrite for dynamic, runtime URL rewriting. For multi-tenant subdomain routing, you can use server middleware to inspect the request and perform redirects, or leverage Vercel's platform-level routing features. If you need true rewrites (not just redirects), you may need to combine Nuxt middleware with Vercel's edge functions or configuration. I'm sorry, but the knowledge sources do not explicitly mention a built-in Nuxt feature that matches Next.js's nextResponse.rewrite for dynamic, runtime rewrites based on subdomain or headers.
Hybrid Rendering & Route Rules | Server Endpoints & Middleware ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai6mo ago
<@277428305756422144> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Brian Barrow
Brian Barrow5mo ago
@psycarlo Did you ever find a solution to this?
psycarlo
psycarloOP5mo ago
@Brian Barrow never. Really wanted to try that with nuxt… never found a way
Kremit Atreides
Kremit Atreides5mo ago
@psycarlo or @Brian Barrow Have you looked into the proxy utils from h3? https://v1.h3.dev/utils/advanced#proxy
Advanced - h3
More utilities
Kremit Atreides
Kremit Atreides5mo ago
Actually you probably don't need those proxy utils. I made a quick demo here https://github.com/Twitch0125/nuxt-multitenant-demo All this demo does is show an example of detecting a subdomain and returning data for that subdomain from a more generalized looking URL. It doesn't work exactly like the video, but Nuxt's and Next's routing are fairly different. Nuxt's client side and server side logic are much more separated, so it's not as elegant of a solution. Hosted on cloudflare workers https://nuxt-multitenant.kaleberc.workers.dev/
GitHub
GitHub - Twitch0125/nuxt-multitenant-demo
Contribute to Twitch0125/nuxt-multitenant-demo development by creating an account on GitHub.
Brian Barrow
Brian Barrow5mo ago
Okay, so the approach in Nuxt would be to not use the dynamic page based routing like you would in Next, but have the subdomain logic handled in server routes and/or middleware. Is that right?
Kremit Atreides
Kremit Atreides5mo ago
@Brian Barrow That's my first approach, yeah.
Kremit Atreides
Kremit Atreides5mo ago
Found this article which goes wayyyyy more in depth. They also use a nitro plugin instead of middleware which I think is a good idea. https://www.adamdehaven.com/articles/powering-multi-tenant-applications-with-nuxt
AdamDeHaven.com
Powering multi-tenant applications with Nuxt
Build efficient multi-tenant applications with Nuxt, from tenant detection to dynamic content and customizable layouts, all while maintaining performance and scalability with a single codebase.
psycarlo
psycarloOP5mo ago
Thanks @Kremit Atreides
Brian Barrow
Brian Barrow4mo ago
Yeah, I came across that and it seems to be the answer. A different approach for sure, but it makes sense.
manniL
manniL4mo ago
cc @Adam DeHaven
Adam DeHaven
Adam DeHaven4mo ago
👋🏼 This is me. Feel free to reach out with questions
Cue
Cue4mo ago
Feel free to scroll to the bottom of the advertised page and observe the 500 Invalid character '\ufffd' error preventing page interactivity 😅
Adam DeHaven
Adam DeHaven4mo ago
@Cue point me at the link/comment you’re referring to? Haven’t had a chance to read this whole channel yet
Brian Barrow
Brian Barrow4mo ago
On mobile the link to your article gives that error
Kremit Atreides
Kremit Atreides4mo ago
Works fine for me on Brave on my Pixel 7 🤔
Brian Barrow
Brian Barrow4mo ago
Seems like it might be a Safari problem
Cue
Cue4mo ago
Appears on chrome on iOS too
manniL
manniL4mo ago
which is also just webkit 😛
Adam DeHaven
Adam DeHaven4mo ago
The article on my site..? I’m confused 😅 or referring to one of the other links above?
Brian Barrow
Brian Barrow4mo ago
Yeah, the article on your site.
No description
Adam DeHaven
Adam DeHaven4mo ago
Why can’t I see this? 🤔 It works for me on the live site @TheAlexLichter or @Brian Barrow would either of you be kind enough to help me debug this? The site loads fine for me on Safari and Chrome, mobile and Desktop 🫠 lol. So odd
Kremit Atreides
Kremit Atreides4mo ago
Maybe it's only when viewing the link from discord? Like maybe it's an IOS WebView thing?
Brian Barrow
Brian Barrow4mo ago
I think @Kaleb is right. I just tried copying it into the browser and it worked fine
Adam DeHaven
Adam DeHaven4mo ago
So odd; I can click on it from here and it works for me - 🫠
Brian Barrow
Brian Barrow4mo ago
I just clicked it from here again and it worked. /shrug
Adam DeHaven
Adam DeHaven4mo ago
Appreciate the help. Back to this actual thread, let me know if I can help answer any multi-tenancy ques. or just to bounce around ideas
manniL
manniL4mo ago
Same. I don’t have any error
psycarlo
psycarloOP4mo ago
@manniL a video of yours on this would be 🔥

Did you find this page helpful?