Nuxt•2d ago

How to get current locale on server side using i18n module?

2 Replies

Hi @salomon_.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To get the current locale on the server side using the i18n module in Nuxt, you can use the useI18n() composable which works in both client and server contexts. Here's how to do it:

// In your server component or middleware
const { locale } = useI18n()
console.log(locale.value) // This will show the current locale

// In your server component or middleware
const { locale } = useI18n()
console.log(locale.value) // This will show the current locale

However, there are some important considerations when working with i18n on the server side: 1. Configuration location: Make sure your i18n detection configuration is in the right place. According to user experiences, browser language detection settings should be in nuxt.config.ts rather than i18n.config.ts Stack Overflow:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US' },
      { code: 'fr', iso: 'fr-FR' }
    ],
    defaultLocale: 'en',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root'
    }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US' },
      { code: 'fr', iso: 'fr-FR' }
    ],
    defaultLocale: 'en',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root'
    }
  }
})

2. Middleware warning: Be careful when using useRoute() or related composables like useLocalePath() in middleware, as you might get warnings about misleading results. Instead, use the to and from arguments passed to the middleware Stack Overflow. 3. Alternative approach: If you need a more custom solution, you can create your own locale composable as shown in the Nuxt documentation:

export const useDefaultLocale = (fallback = 'en-US') => {
  const locale = ref(fallback)
  if (import.meta.server) {
    const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
    if (reqLocale) {
      locale.value = reqLocale
    }
  } else if (import.meta.client) {
    const navLang = navigator.language
    if (navLang) {
      locale.value = navLang
    }
  }
  return locale
}

export const useDefaultLocale = (fallback = 'en-US') => {
  const locale = ref(fallback)
  if (import.meta.server) {
    const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
    if (reqLocale) {
      locale.value = reqLocale
    }
  } else if (import.meta.client) {
    const navLang = navigator.language
    if (navLang) {
      locale.value = navLang
    }
  }
  return locale
}

This approach directly accesses the request headers on the server side to determine the locale Nuxt Docs. Remember that if you're using the i18n module, the useI18n() composable is the recommended way to access the current locale in both client and server contexts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@1029431292170874910> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How to get current locale on server side using i18n module?

Did you find this page helpful?