Revision history [back]

To set up Nuxt 3 to operate behind a reverse proxy, follow these steps:

1. Configure the reverse proxy to forward requests to the Nuxt 3 server. This can typically be done by adding a proxy pass directive in the reverse proxy configuration.

2. In the Nuxt 3 server configuration, set the base URL. The base URL specifies the URL path that Nuxt will operate under. You can set the base URL using the "router" property in the "nuxt.config.js" file, like so:

export default {
  router: {
    base: '/my-app/'
  }
}

1. Set the "trustProxy" option in the Nuxt 3 server configuration. This option tells Nuxt to trust X-Forwarded-* headers sent by the reverse proxy.

export default {
  server: {
    trustProxy: true
  }
}

1. If your reverse proxy is adding a prefix to the URL path (e.g. "/my-app/"), you can modify the routes in your Nuxt 3 application to account for this. You can use the "route.path" property or the "context.req.url" property to determine the current URL path and modify it accordingly.

export default {
  router: {
    middleware: 'routePrefix'
  }
}

// routePrefix.js middleware
export default function ({ route }) {
  if (process.server) {
    const prefix = '/my-app'
    route.path = route.path.replace(prefix, '')
  }
}

1. If your reverse proxy is adding HTTPS encryption, make sure to set the "https" option in your Nuxt 3 server configuration. Nuxt will automatically detect the HTTPS connection and adjust the "protocol" property accordingly.

export default {
  server: {
    https: true
  }
}

By following these steps, you should be able to run your Nuxt 3 application behind a reverse proxy.