Nitro, i18n and Dev Proxy

When you use Nuxt, it is normal to use Nitro as well, but sometimes this does not fit into the scenario you have been prepared for. The API requests are handled by another back-end server and in order to develop the application locally, a proxy must be set up.

Nitro has a description in the documentation on how to set up the devProxy, and everything works fine until I encountered a Nuxt application with an active i18n module with several language localizations and configured in prefix strategy. With the prefix strategy, the URL address is automatically replaced and the devProxy stops working.

// nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    devProxy: {
      "/~": {
        target: "http://127.0.0.1:3243/",
      },
    },
  },
});

In our case, all requests starting with /~, for example: /~/api/request/method, Nitro redirects them to another back-end server. But when the language culture /en/~/api/request/method is unexpectedly added to the address and Nitro stops communicating with the other server. That's why we quickly enriched the devProxy configuration.

// nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    devProxy: {
      "/bg/~": {
        target: "http://127.0.0.1:1818/",
      },
      "/en/~": {
        target: "http://127.0.0.1:1818/",
      },
      "/~": {
        target: "http://127.0.0.1:1818/",
      },
    },
  },
});

The idea was to confirm that this will work, but so far I have not found another way. The problem comes when adding a new language localization. Each one must be added to the devProxy configuration. Drop a line if you know a more cultured way.