I18n-module: Set cookie to locale that it redirected to, and always redirect (unless manually switched to different locale)

[FransTwisk]

What problem does this feature solve?

I implemented my own version of detectBrowserLanguage when I was still using an older version of nuxt-i18n and I was happy to see this feature was added in a later version! I just tried it out, and I think the current implementation can be improved, because now it will only redirect the first time, not when a user returns to the main url.

What does the proposed changes look like?

The cookie should be set to the initially detected language, en then always check what the (last selected) language is set to in the cookie. Then we can always redirect to the language stored in the cookie. If the user manually switched language through the switchLocalePath function, the cookie can be updated with the manually selected language, and also remember this manual overwrite on the next visit.

_{This feature request is available on Nuxt.js community (#c81)}

[ghost]

fixed in nuxt-community@9ad540e17206226fd2b682132cd69ee7315a09e3

[borie88]

Doesn't seem to work though

[lukaVarga]

Not working for me either. If I go to main_url/locale, it will use that locale and store it in the cookie. The next time I visit main_url (so without the locale suffix), it will load the default locale instead of using the one that's stored in the cookie

Ok, I figured it out. Basically, if you're using Vuex with cookies, it'll store the I18n stuff within the vuex cookie. nuxt-i18n doesn't read it from there, though, it reads it from the cookieKey within detectBrowserLanguage option. Likewise, when you change the language, while it will update the state for Vuex, it won't update the i18n cookie. So you have to do that manually.

This works for me:

// nuxt.config.js

module.exports = {
...
  modules: [
    ['nuxt-i18n',
      {
        detectBrowserLanguage: {
          useCookie: true,
          cookieKey: 'lang',
          alwaysRedirect: true,
          fallbackLocale: 'en'
        },
        vuex: {
          moduleName: 'i18n',
          mutations: {
            setLocale: 'I18N_SET_LOCALE',
            setMessages: false
          },
          preserveState: false
        },
        onLanguageSwitched: (previous, current) => {
          if (process.client) {
            const DATE = new Date();
            DATE.setTime(DATE.getTime() + 365 * 24 * 3600 * 1000);
            document.cookie = 'lang=' + current + '; path=/; expires=' + DATE.toUTCString();
          }
        }
      }
    ]
  ]
...
}

Works for server-side rendering as well.

[borie88]

Thanks. I ended up doing something similar, making a plugin:

import VueCookie from 'vue-cookie'

export default function ({ app }) {
  app.i18n.onLanguageSwitched = (oldLocale, newLocale) => {
    if (process.browser) {
      if (VueCookie.get('i18n_redirected') !== newLocale) {
        VueCookie.set('i18n_redirected', newLocale)
      }
    }
  }
}

[rchl]

This is now implemented. Redirection always happens with alwaysRedirect enabled and saved locale can be updated with setLocaleCookie() method.

Can be closed.

[MasterHiei]

@rchl Hi, when alwaysRedirect is enable, can I switch the locale manually and immediately just like switchLocalePath() method? I tried setLocaleCookie() but it only works on the next navigation.

[rchl]

@MasterHiei You can set cookie and then call this.$router.replace(this.switchLocalePath(locale));

[MasterHiei]

@rchl That's it! I'm foolish! Thank you for your help!

[stact]

Maybe a feature request to allow switchLocalePath to change cookie automatically
Boolean to add ? this.switchLocalePath(locale, true /* set cookieKey */)

[rchl]

@stact despite the naming, switchLocalePath just returns URL of current page for given locale. So it wouldn't really fit to make it set the cookie. Remember it can be used multiple time in a template and then it would change state every time it's called.

[blowsie]

For some clarity on what @rchl has stated

@MasterHiei You can set cookie and then call this.$router.replace(this.switchLocalePath(locale));

You can do this like so in your component

 changeLocale(locale) {
      this.$i18n.setLocaleCookie(locale)
      this.$router.push(this.switchLocalePath(locale))
    }

And as confusing as all of this is, its actually documented on here
https://nuxt-community.github.io/nuxt-i18n/lang-switcher.html

If detectBrowserLanguage.useCookie and detectBrowserLanguage.alwaysRedirect options are enabled, you might want to persist change to locale by calling this.$i18n.setLocaleCookie(locale) (or app.i18n.setLocaleCookie(locale)) method. Otherwise locale will switch back to saved one during navigation.

My suggestion would be to add a switchLocale method which does this work and rename switchLocalePath to something more suited like getLocalePath

[rchl]

My suggestion would be to add a switchLocale method which does this work and rename switchLocalePath to something more suited like getLocalePath

I agree and given that v6 is in the works, it can be done there.

[cloudstrife-ff]

Hi everyone! Sorry if this is not the thread but I think my issue is related, also I'm a beginner at programming so for sure I must be doing something wrong but can't find the reason.

I'm using the following dependencies:

"nuxt": "^2.8.1",
"nuxt-i18n": "^6.0.0"

I have the following nuxt.config.js file:

[
      'nuxt-i18n', {
        locales: [
          {
            code: 'en',
            iso: 'en-US',
            name: 'English',
            file: 'en.js'
          },
          {
            code: 'es',
            iso: 'es-AR',
            name: 'Spanish',
            file: 'es.js'
          }
        ],
        detectBrowserLanguage: {
          useCookie: true,
          cookieKey: 'i18n_redirected',
          alwaysRedirect: true,
          fallbackLocale: 'en'
        },
        lazy: true,
        langDir: 'locales/',
        vuex: {
          moduleName: 'i18n',
          syncLocale: true,
          syncMessages: true,
          syncRouteParams: true
        }
      }
    ],

Vue component:

<nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
<nuxt-link :to="switchLocalePath('es')">Spanish</nuxt-link>

I'm having the following issues:

• When I access the website for the first time it reads the default browser language (lets say it's English at the beginning) saving the value in a cookie for later use, after that I click Spanish and it changes correctly adding the /es to the URL, the issues are that the cookie is not being updated to es and the content is not changing, only the URL changes.

I'm using this approach because I want that if the user is for example under Spanish language and deletes the /es manually from the URL and press enter to redirect to Spanish as expected and not to English as it's by default.

• Another issue I saw but don't know if it's related to Vuex, Vue tools and/or nuxt-i18n is the following which happens as soon as you access, open Vue dev tools, go to Vuex tab and change a language:

Thank you.

[blowsie]

@cloudstrife-bce did you read the thread?

You need to manually set the cookie

 changeLocale(locale) {
      this.$i18n.setLocaleCookie(locale)
      this.$router.push(this.switchLocalePath(locale))
    }

[cloudstrife-ff]

Hi @blowsie, thank you for the help!I been reading around and searching for other repositories to see how to achieve it but unfortunately I still couldn't fix it, can you help me taking a look at my CodeSandbox please?

Basically I'm trying to achieve the following:

• At the beginning get the language of the browser and show that one, if none use English by default (Working)
• Always show /en or /es in the URL (Working)
• Save locale and messages to Vuex (Working)
• If the user deletes manually the /en or /es from the URL get the cookie value and set it to that one, not to redirect showing in English if it was in Spanish when I delete it

Another thing which is not working is the data changing in the CodeSandbox example, it only changes the URL but not the data from Testing:.

Sorry to bother and thank you again for your help.

[rchl]

The initial issue is fixed. There is setLocale API that changes the language, updates the cookie and redirects to new route.