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.

nuxt.config.ts

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

For better SEO, it's recommended to set redirectOn to root (which is the default value). With it set, the language detection is only attempted when the user visits the root path (/) of the site. This allows crawlers to access the requested page rather than being redirected away based on detected locale. It also allows linking to pages in specific locales.

Browser language is detected either from navigator when running on client-side, or from the accept-language HTTP header. Configured locales (or locales iso 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 after the first redirection. You can change the cookie's name by setting detectBrowserLanguage.cookieKey option to whatever you'd like, the default is i18n_redirected.

nuxt.config.ts

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.

nuxt.config.ts

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

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

nuxt.config.ts

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

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

nuxt.config.ts

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.

nuxt.config.ts

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

Ignoring Localized Routes

Customize localized route exclusions per page component.

SEO

When the `useLocaleHead` is called, @nuxtjs/i18n attempts to add some metadata to improve your pages SEO. Here's what it does.