server/api/[route].ts doesn't work with dynamic route
I use Nuxt3 with Laravel to separate frontend/backend.
I catch every GET api routes with
server/api/[route].get.tsexcept auth routes.
However,when I use dynamic route such as /api/users/${id}, that route is considered as location in Nuxt3,not API route to Laravel.
Nuxt 3.15.4
vue latest
Laravel 12.1
Some test results here:
fetch /api/doesexist -> return json
fetch /api/doesnotexist -> return Laravel's fallback
fetch /api/doesexist/${variable} -> Nuxt's 404 error3 Replies
Hi @nemunyan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In Nuxt 3, when you create a file like
Nuxt will intercept and handle any API route that matches a file in
server/api/[route].ts, it registers a dynamic API route that is handled by Nuxt's server engine (Nitro). This means that any request to /api/anything will be intercepted and processed by your Nuxt server handler, not passed through to your backend (Laravel) unless you explicitly proxy or forward it.
From your description:
- Requests like /api/doesexist and /api/doesnotexist are handled as expected, with Nuxt or Laravel responding depending on whether a matching Nuxt API route exists.
- However, when you request /api/doesexist/${variable} (e.g., /api/doesexist/123), Nuxt tries to match this to a dynamic API route (e.g., server/api/doesexist/[variable].ts). If such a file does not exist, Nuxt returns a 404, and the request does not reach Laravel.
Key points from the documentation:
- Dynamic API routes in Nuxt are created using bracket notation in filenames, e.g., server/api/hello/[name].ts will match /api/hello/nuxt and can access the parameter via event.context.params or getRouterParam(event, 'name') Docs: Route Parameters.
- If a dynamic route file does not exist for a given path, Nuxt will return a 404 and will not forward the request to your backend automatically.
- Nuxt's API routes and your Laravel backend are separate. If you want certain API routes to be handled by Laravel, you should not create conflicting files in server/api/ for those routes in Nuxt. Alternatively, you can set up a proxy to forward unmatched API requests to Laravel Stack Overflow: Is it required to use server folder in Nuxt 3 when we have API endpoints?.
What’s happening in your case:
- /api/doesexist/${variable} is not reaching Laravel because Nuxt is trying to handle it as an API route. If there is no matching file like server/api/doesexist/[variable].ts, Nuxt returns a 404.
How to resolve:
- Do not create dynamic API route files in Nuxt for routes you want Laravel to handle. Remove or avoid creating files like server/api/[route].ts if you want those requests to go to Laravel.
- Set up a proxy in your Nuxt or server configuration to forward unmatched API requests to your Laravel backend. This is commonly done in development with tools like Vite or Webpack dev server, or in production with a reverse proxy (e.g., Nginx).
Summary:Nuxt will intercept and handle any API route that matches a file in
server/api/. If you want Laravel to handle certain API routes, make sure there is no conflicting file in Nuxt for those routes, or set up a proxy to forward unmatched requests to Laravel. The knowledge sources confirm this separation and the behavior of dynamic API routes in Nuxt Docs: server directory, Stack Overflow: Is it required to use server folder in Nuxt 3 when we have API endpoints?.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@194339366448005121> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
With your advice, I solved with [...route].get.ts! Thank you