Nuxt proxy route rule not getting picked up

Help
1

In our Nuxt configuration, we set up route rules to proxy our API routes to the backend:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  routeRules: {
    '/api/**': {
      proxy: `${process.env.NUXT_API_ENDPOINT}/api/**`,
    },
  },
})

This works out-of-the-box with Cloudflare Pages for example, but on our Vercel deployment it all returns a 404:

image
image452Ă—255 10.9 KB

Going from documentation, it seems to be supported: Nuxt on Vercel
Also from the Nitro documentation, proxy is a core route rule: Server Routes - Nitro

Is this supposed to work with Vercel?

I would use a vercel.json with rewrites, but it doesn’t seem like they support endpoints based on environment variables?

2

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

4

It works for me if I move the routeRules property to nitro.config.ts in my example project: GitHub - amyegan/nitro-app

You can see it in action here: nitro-app-sigma.vercel.app

Please give that a try in your project and let me know how it goes!

5

Thanks for the example @amyegan !

Sadly, adding the same nitro config to my Nuxt app doesn’t help, and Nuxt also complains:

WARN Using nitro.config.ts is not supported together with Nuxt. Use options.nitro instead. You can read more in https://nuxt.com/docs/api/nuxt-config#nitro.

Is there any way to see what rewrites are set up for a given project in Vercel based on app configuration?
I’m wondering if Vercel is picking up nuxt.config.ts first, and ignoring the nitro.config.ts…

6

What happens if you remove the nitro.config.ts and instead use nitro option linked in that warning?

That would make the Nuxt config look like this:

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/api/**': {
        proxy: `${process.env.NUXT_API_ENDPOINT}/api/**`,
      },
    },
  }
})
7

Tried that already, and it didn’t help unfortunately. Same results, but at least Nuxt doesn’t complain about it, and tackles it properly.
Do you have any insight into how the underlying Vercel implementation actually works? What property is the “official” one for Nuxt projects?

8

You should be able to use the Nuxt.js framework preset to handle the build and development settings for most Nuxt projects. I’m not able to replicate the issue you’re seeing.

Here’s my latest attempt based on the basic Nuxt starter app. Only thing I changed was the nuxt.config.ts file to include nitro.routeRules.

Repo: GitHub - amyegan/nuxt-3075
Example: nuxt-3075.vercel.app

Do you have a public repo or minimal reproducible example that you can share here? Real apps are always more complex than the quick start templates from any framework. There could be some other configuration in the app that’s preventing the proxy rewrite.

9

Thanks for your help @amyegan !

After much debugging, I figured out that the “problem” was that in our project, we had a folder called “api”.
This just contains our actual API client to interface with our backend, and is not part of the routable pages in the Nuxt app.
Seems like this conflicts with the rewrite somehow, because once renaming it to something else, the rewrite works!
Maybe you should consider adding a “gotcha” to the rewrite docs that any route defined cannot have a folder with the same name, or maybe this is a bug?

1 Like
10

Thanks for the feedback! I’m glad you got it working :grin:

12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.