How to use cookie value as a locale without using detectBrowserLanguage?

[XenBG]

Hello! I'm trying to get the Nuxt 3 to use cookies to determine the language of the pages. I'm not using detectBrowserLanguage, also I'm not using locale paths in my project. I just want to make Nuxt 3 to look for a specific cookie value and use it to set the base locale.

If the cookie value contains something other than the supported locales, it should fallback to the default locale.

I haven't been able to figure out if I can achieve it with that module and that's why I'm here and asking.

[ineshbose]

Hi, the example in the docs show exactly that to easily set it up with detectBrowserLanguage - is there a reason you're not preferring to use that and do it manually?

[XenBG]

On first page visit, the app should look for a cookie. If its not set, it will load the default locale and create the cookie with the locale as a value. If its set, firstly it will validate it and secondly it will set the users desired locale to the app based on the valid cookie value.

[boblz7]

@ineshbose How can this be the end of discussion? What is the solution for this, I'm having the same issue.

@XenBG Have you found a solution?

[XenBG]

Not really :(. I'm still struggling on that, and I can't make it to work the way I want with detectBrowserLanguage enabled.

[BobbieGoede]

Can you provide a minimal reproduction of your use case and describe the expected behaviour vs current behaviour? Based on your original description I feel like that should be possible to configure 🤔

[tsekka]

I'm another one having this issue. So I'll explain my use case.

First, some background to help explain a situation that might not be fully understood by native English speakers or those from larger language groups, particularly relating to speakers of smaller languages. My website offers content in both a local language and English. Approximately 90% of our users are local, many of whom have their browser's language set to English—often because it is the default upon purchase, or they prefer it due to the awkward translations that feel unnatural (not too long ago, it wasn’t even possible to use browsers and other devices in our local language, so we are used to having them in English). Nevertheless, even if our browsers are set to English, we still expect to access content in the local language by default.

However, currently, when we disable the detectBrowserLanguage feature, it also disables the useCookie functionality. What we need is to serve the default local content initially (not using the browser’s navigator or accept-language header) but still serve English content based on a previously set cookie (for instance, if a user has visited the /en page or switched to English from a locale selector previously).

[boblz7]

@XenBG

I found a solution after much time spent. Actually this is the best case scenario in my opinion. You're still letting i18n to do the "heavy lifting" with logic and just setting the cookie beforehand. 👍

---

So just simply create a plugin and let it work it's magic:

plugins/i18n.ts:

export default defineNuxtPlugin({
  name: 'vue-i18n-cookie',
  dependsOn: ['i18n:plugin'],
  setup(nuxtApp) {
    const i18n = nuxtApp.vueApp.$nuxt.$i18n
    const cookie = i18n.getLocaleCookie()
    if (!cookie) i18n.setLocaleCookie(i18n.defaultLocale)
  },
})

nuxt.config.ts

export default defineNuxtConfig({
  // ..
  modules: ['@nuxtjs/i18n'],
  i18n: {
    // ..
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_language',
      fallbackLocale: 'bs',
    },
  },
})