Nuxt3 makes it easy to create server-side APIs by simply creating a file like server/api/xxx.ts. However, this document is for those who use other web frameworks for server-side APIs and want to set up their development environment easily.

In Nuxt3 versions prior to 3.0.0-rc.11, you could set up vite.server.proxy in nuxt.config.ts. However, this setting is no longer available in Nuxt3 versions 3.0.0-rc.12 and later.

From rc.12 onwards and in the official release, you can achieve the same functionality by setting devProxy in nitro.config.ts.

Background

While developing a Nuxt application, I was proxying all requests to paths under /api/ to another server (Django) on the Dev server. In the production environment, the routing is managed by Kubernetes Ingress, so this proxy was only used in the development environment.

This was achievable with the following configuration in nuxt.config.ts:

export default defineNuxtConfig({
  vite: {
    server: {
      proxy: {
        '/api/': {
            target: 'https://example.com/',
            ....
        },

This setup worked fine in Nuxt3 rc.11, but after upgrading to rc.12 or the official 3.0.0 release, it no longer functions.

History

This issue has been discussed on Github:

https://github.com/nuxt/framework/discussions/1223

https://github.com/nuxt/framework/discussions/1223#discussioncomment-2784724

As announced in this comment, for development environment purposes, you should use the proxy settings in Nitro.

Adding one more configuration file is all that is needed; no additional packages are required.

Configuration Method

Create nitro.config.ts alongside nuxt.config.ts in the project root.

nitro.config.ts

import { defineNitroConfig } from 'nitropack';

// https://nitro.unjs.io/config#devproxy
// https://github.com/http-party/node-http-proxy#options
export default defineNitroConfig({
  devProxy: {
    '/api/': {
      target: 'https://api.example.com/api/',
      changeOrigin: true,
      hostRewrite: true,
      cookieDomainRewrite: true,
      headers: {
        'X-Forwarded-Host': 'localhost:3000',
        'X-Forwarded-Proto': 'http'
      },
    }
  }
});

Then, restart the development server. This will enable the development proxy.

Verification Method

To quickly verify how each option works, you can start a server on your development machine using nc.

nc -l 8000

Then in nitro.config.ts:

export default defineNitroConfig({
  devProxy: {
    '/api/': {
      target: 'http://127.0.0.1:8000',
      ...

Set it up like this to confirm the operation.

Although it can only respond to one request at a time, this is sufficient for testing purposes.

References

Nitro documentation:

• https://nitro.unjs.io/config#devproxy
• https://github.com/http-party/node-http-proxy#options