Browser language detection

By default, Nuxt i18n module attempts to redirect users to their preferred language by detecting their browser's language. This is controlled by the detectBrowserLanguage option.

export default defineNuxtConfig({
  i18n: {
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root' // recommended
    }
  }
})

Browser language is detected either from navigator when running on client-side, or from the accept-language HTTP header. Configured locales (or locales language and/or code when locales are specified in object form) are matched against locales reported by the browser (for example en-US,en;q=0.9,no;q=0.8). If there is no exact match for the full locale, the language code (letters before -) are matched against configured locales.

To prevent redirecting users every time they visit the app, Nuxt i18n module sets a cookie using the detected locale. You can change the cookie's name by setting detectBrowserLanguage.cookieKey option to whatever you'd like, the default is i18n_redirected.

i18n: {
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'my_custom_cookie_name'
  }
}

If you'd rather have users be redirected to their browser's language every time they visit the app, disable the cookie by setting detectBrowserLanguage.useCookie to false.

export default defineNuxtConfig({
  i18n: {
    detectBrowserLanguage: {
      useCookie: false
    }
  }
})

To completely disable the browser's language detection feature, set detectBrowserLanguage to false.

export default defineNuxtConfig({
  i18n: {
    // ...
    detectBrowserLanguage: false
  }
})

To redirect the user every time they visit the app and keep their selected choice, enable alwaysRedirect:

export default defineNuxtConfig({
  i18n: {
    // ...
    detectBrowserLanguage: {
      useCookie: true,
      alwaysRedirect: true
    }
  }
})

To use the cookie within a cross-origin environment (e.g. in an iFrame), you can set cookieCrossOrigin: true. This will change the cookie settings from 'SameSite=Lax' to 'SameSite=None; Secure'.

export default defineNuxtConfig({
  i18n: {
    detectBrowserLanguage: {
      useCookie: true,
      cookieCrossOrigin: true
    }
  }
})