CODEWITHSUNDEEP
nuxt.jsvuejs3nuxt3.jsnuxt-i18n
Stephane
Stephane

Reputation: 43

Nuxt3 & Nuxt I18n Plugin doesn't detect Browser language preference & Deployement issue

Actually working with Nuxt3 RC Documentation and it's dedicated plugin Nuxt/I18n Documentation

I encountered two issues:

First issue is that I'm failing to detect Browser preference language it always fallback on the default local and I saw that the cookie wasn't set until I change the language with useSwitchLocalePath() note: Switching language works, I've got the /en and the cookie

My second issue is when I'm generating my static site with nuxi generate and once the website is deployed, going to my root path '/' sends back a 404 but my localhost handles the path and redirect to .../en for example, maybe the issue is from the prefix strategie that I used because of what I've read in the documentation under

This strategy combines both previous strategies behaviors, meaning that you will get URLs with prefixes for every language, but URLs for the default language will also have a non-prefixed version (though the prefixed version will be preferred when detectBrowserLanguage is enabled.

This was my nuxt.config.js file

export default defineNuxtConfig({
  modules: [
     '@nuxtjs/i18n'
  ],
  i18n: {
    defaultLocale: "en",
    baseUrl: 'https://*****',    
    strategy: "prefix",
    detectBrowserLanguage: {      
      useCookie: true,      
      cookieKey: 'i18n_lang',      
      redirectOn: 'root',  
    },
    locales: [
      { code: 'en', iso: "en-US", name: "ENGLISH", file: 'en-US.json', isCatchallLocale: true }, 
      { code: 'fr', iso: "fr-FR", name: "FRENCH", file: 'fr-FR.json' }],
    lazy: true, 
    langDir: 'locales'
  }
})

To try it out I configured my Chrome to be in French and my Firefox to be in English To set the language using the browser pref I've added a file in my pluging folder launch.client.js

import { getCookie } from "../utils/cookie"

const LANG_COOKIE_NAME = "i18n_lang"
const LANG_COOKIE_DATE = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365).toGMTString()
const LANG_COOKIE_SAME_SITE = "Lax"

export default defineNuxtPlugin((nuxtApp) => {
  if (getCookie(LANG_COOKIE_NAME) !== undefined) return

  let browserLangPref = navigator.language
  const { locales, setLocale } = nuxtApp.$i18n
  const availableLocales = [...locales.value.map(el => el.code), ...locales.value.map(el => el.iso)]

  if (!availableLocales.includes(browserLangPref)) browserLangPref = "en"

  document.cookie = `${LANG_COOKIE_NAME}=${browserLangPref}; expires=${LANG_COOKIE_DATE}; path=/; SameSite=${LANG_COOKIE_SAME_SITE}`;
  setLocale(browserLangPref)
})

This workaround works but doesn't seem to be a clean way of doing this

For the deployment issue I switch back to the prefix_and_default strategie and with my plugins everything seem ok

I'm just asking myself if this wasn't a good way to go, maybe I just didn't understood something in the documentation

Maybe somebody has a functionnal repo with this use case and that I can check.

Upvotes: 4

Views: 1831

Answers (1)

Marian
Marian

Reputation: 375

If you use server side rendering than I would use something like this:

if (process.server) {
      const nuxtApp = useNuxtApp()
      const reqLocale = nuxtApp.ssrContext?.event.node.req.headers['accept-language']?.split(',')[0]
      if (reqLocale) {
        return reqLocale
      }
    }

Upvotes: 0

Related Questions