I’ve been using Nuxt 2 for a long time, but then Nuxt 3 came along and a lot of things changed.

As this is the way forward, I decided to use Nuxt 3 on my latest project, my personal website, that is, on this site. One of the main changes is the way we must make requests to the API, since before it used axios and now nuxt uses ofetch by default.

I already had a beautiful configuration between axios and nuxt-i18n, so I had to implement a new one between ofetch and nuxt-i18n. It took me a while to get to this setup, so maybe this insight will be useful to someone else.

The problem

The main problem is the following: when we work with a multi-language project, we need to inform the API which language the user is using when making a request. So that the user receives messages in the same language, and this can be done through headers.

So, we need to dynamically configure the ofetch instance to change the header whenever the user changes the website language.

The approach was the following: replace the global ofetch instance whenever the language is changed using a plugin. Additionally, I took the opportunity to make other global settings such as the baseURL and other headers.

In plugins/ofetch.ts:

import { ofetch } from 'ofetch'

export default defineNuxtPlugin((nuxtApp) => {

  const configFetch = (locale = 'en') => {
    globalThis.$fetch = ofetch.create({
      headers: {
        Accept: 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
        'Accept-Language': locale
      },
      baseURL: nuxtApp.$config.public.apiBaseUrl,
    })
  }
  
  nuxtApp.hook('i18n:beforeLocaleSwitch', ({ newLocale }) => {
    configFetch(newLocale)
  })

  nuxtApp.hook('app:created', () => {
    configFetch(nuxtApp.$i18n.locale.value)
  })
  
})

Taking advantage of the nuxt and i18n hooks, we configure a new ofetch instance in two situations: when our application starts and well before i18n changes the language.

Additionally, we can provide the configFetch method to be reused outside the plugin whenever necessary.

export default defineNuxtPlugin((nuxtApp) => {
  ...
  return {
    provide: {
      configFetch
    }
  }
})

After providing the method, we can access it from any component and reuse it as needed. In some component:

<script setup lang="ts">
const { $configFetch } = useNuxtApp()

$configFetch('fr')
</script>

---

Thank you very much for your attention, I hope this little insight is useful to you. Comment, share and save for later.

Enjoy and explore other insights or subscribe to our newsletter to receive updates on upcoming insights.