Changing locale does not update 'Accept-Language' value when passing as 'Accept-Language' header.

[RobertsG]

Environment

Stackblitz

• Nuxt 3.11.1

Reproduction

https://stackblitz.com/edit/nuxt-starter-todkt8?file=app.vue

Describe the bug

When watching the locale and attempting to pass it to useFetch as a 'Accept-Language' header, the value is not updated when locale is changed.

Additional context

This also applies to any other attributes as query or body, but I'm specifically interested in passing the correct Accept-Language to the back end.

You can also investigate by checking out the network tab, and looking at the headers when changing the language.

Logs

No response

[BobbieGoede]

The page setup isn't called again as you're not navigating on locale change, this is because you're directly mutating locale instead of using setLocale (see docs).

I don't recommend directly mutating locale but if you still want this to work you should use a computed variable for headers as with your current approach it will be fixed on its initial assignment on page load.

So something like this should work:

const { data } = useFetch('/api/test', {
  server: false,
  headers: computed(() => ({
    'accept-language': locale.value,
  })),
  watch: [locale],
});

[RobertsG]

Thanks for the response, I had issues with using a computed value as the accept-language value before. But it seems that was because I was passing the value as computedValue.value. But it works now following you example, so thank you.

I was mutating locale directly or using a select, as I was following this example in the documentation here: https://i18n.nuxtjs.org/docs/getting-started/usage#translate-with-vue-i18n

[BobbieGoede]

I was mutating locale directly or using a select, as I was following this example in the documentation here: i18n.nuxtjs.org/docs/getting-started/usage#translate-with-vue-i18n

Oh! Thanks for pointing it out, I'll update the docs to prevent others from doing the same 😅..

Thanks for the response, I had issues with using a computed value as the accept-language value before. But it seems that was because I was passing the value as computedValue.value. But it works now following you example, so thank you.

Sounds like this issue is resolved, so I'll close it, if you have more questions let me know!