Redirect 404 pages from a middleware
Hi there, i'm currently working on my company's new website with Nuxt 3.17.
This new site will be AB tested and some of the old site's pages won't be implemented from the start in the new version.
I need to detect routes that are 404 in the new website and to redirect these to the equivalent page on the old website...
For example a route that doesn't exist like
new.mydomain.com/nope should redirect to www.mydomain.com/nope
I thought I could intercept these unimplemented routes from a middleware but I can't find any documentation online.
Is this even a good idea or are there some better practices ?
Thanks !3 Replies
Hi @bnthor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To redirect 404 pages to an external site (like your old website) in Nuxt 3, you can use route middleware to detect when a route is not implemented and then perform a redirect. Nuxt's middleware system allows you to intercept navigation and either abort it, throw an error, or redirect to another route—including external URLs.
Here's how you can approach this:
1. Detecting 404s in Middleware:
You can create a global or named route middleware that checks if the current route matches any of your implemented pages. If it doesn't, you can use the
Alternatively, you can throw a 404 error in middleware, which will show your custom error page. However, to redirect to an external site, you should use
- Nuxt Middleware Documentation - defineNuxtRouteMiddleware API This approach is valid and leverages Nuxt's middleware system as intended. There are no explicit warnings against this pattern in the official docs, and it is a common way to handle conditional redirects in Nuxt 3. If your list of unimplemented routes is large or dynamic, consider a more scalable way to check for implemented routes (e.g., using route meta or a backend check) defineNuxtRouteMiddleware. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
You can create a global or named route middleware that checks if the current route matches any of your implemented pages. If it doesn't, you can use the
navigateTo helper to redirect to the old site.
2. Throwing Errors in Middleware:Alternatively, you can throw a 404 error in middleware, which will show your custom error page. However, to redirect to an external site, you should use
navigateTo with an absolute URL.
Example:
- Attach this middleware globally or to specific routes as needed.
- The navigateTo helper can redirect to external URLs when you set { external: true } (see navigateTo documentation).
- You can also throw a 404 error using createError, but that will only show your Nuxt error page, not redirect externally defineNuxtRouteMiddleware.
Caveats:
- You need a way to determine if a route is "not implemented." This could be a list, a pattern, or a check against your dynamic routes.
- If you use static site generation, ensure that the middleware runs on the client as well, since 404s may be handled differently in static deployments.
References:- Nuxt Middleware Documentation - defineNuxtRouteMiddleware API This approach is valid and leverages Nuxt's middleware system as intended. There are no explicit warnings against this pattern in the official docs, and it is a common way to handle conditional redirects in Nuxt 3. If your list of unimplemented routes is large or dynamic, consider a more scalable way to check for implemented routes (e.g., using route meta or a backend check) defineNuxtRouteMiddleware. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@802089588168196098> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
That's not okay, i mean, I couldn't loop over the
implementedRoutes const because most of my routes are dynamic, and there's a lot of routes anyway... Isn't there a nitro / h3 event that I could intercept from the middleware ?