How to add an i18n locale tag to a Nuxt api proxy?

I am currently working on an app with a Nuxt frontend and a Django backend. The Django backend is localized with i18n. Therefore, the URL contains an i18n tag (example.com/en/). I now want to take this tag from i18n in Nuxt and add it to my proxy in the Nuxt config, which currently looks like this:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2024-04-03',
    devtools: { enabled: true },

    modules: ['@nuxtjs/tailwindcss', '@nuxtjs/i18n'],

    nitro: {
        devProxy: {
            '/api': {
                target: `http://127.0.0.1:8000/`,
                changeOrigin: true,
            },
        },
    },

    i18n: {
        locales: ['en', 'de'],
        defaultLocale: 'en',
    },
});

The process should be as follows:

  1. User with French Nuxt language calls example.com/hello
  2. mybackend.com/fr/hello is called via the proxy (/api). If it is Russian, mybackend.com/ru/hello is called.

I tried to achieve my goal with a middleware, but could only append the tag.

Back to Top