How to in nuxt.config.js get the current locale and add it to headers axios

Question

Using NuxtJS, how to output the user's chosen locale in the axios headers? So that when requesting to the backend, the 'Accept-Language' header with the selected locale is transmitted.

nuxt.config.js

...
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    '@nuxtjs/i18n',
  ],

  i18n: {
    nuxtI18nHead: true,
    strategy: 'prefix_except_default',
    defaultLocale: "en",    
    locales: [
      {
        code: 'de',
        ico: 'de-DE',
        file: 'de-DE.json'
      },
      {
        code: 'ru',
        ico: 'ru-RU',
        file: 'ru-RU.json'
      },
      {
        code: 'en',
        ico: 'en-US',
        file: 'en-US.json'
      },
    ],
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: "i18n_redirected",
      alwaysRedirect: false,
      fallbackLocale: "en",
      redirectOn: 'root',
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: 'http://127.0.0.1:8000',
    headers: {
      common: {
        'Accept-Language': 'en' /// Получить тут выбранную локаль
      },      
    }
  },

Answer 1

I found only the solution for middleware. Maybe you can use it to intercept axios calls.

This was also an issue raised in Nuxt github and that was solved by the Nuxt team the following way :

// middleware/something.ts
export default defineNuxtRouteMiddleware(() => {
const { $i18n } = useNuxtApp();
const locale = $i18n.locale;
// ...

Source of this answer : https://github.com/nuxt-modules/i18n/issues/2146