Nuxt•4w ago

$t doesn't work in Nuxt ^3.16.0 i18n ^9.3.1

Hi, after upgrading to Nuxt ^3.16.0 and @nuxtjs/i18n ^9.3.1, the $t function stopped working. I kept the same configuration as before, following the documentation, but translations are not being returned. If I downgrade to Nuxt ^3.15.4 and @nuxtjs/i18n ^8.5.6, everything works fine. Here is a reproduction: https://stackblitz.com/edit/nuxt-starter-rrujrcfn?file=package.json What has changed in the new version? We have many projects, so we need to know if we should stay on the old version. Thanks and kind regards, Davide

Davide Marchet

StackBlitz

Nuxt - Starter (forked) - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

3 Replies

kapa.ai•4w ago

Hi @dido_dev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your frustration with the i18n translation issue after upgrading to Nuxt 3.16.0 and @nuxtjs/i18n 9.3.1. Based on the knowledge sources, there have been some changes in how i18n configuration works in newer versions. The issue you're experiencing is likely related to configuration changes required between versions. Looking at your reproduction and the documentation, here's what might be happening: 1. In newer versions of @nuxtjs/i18n, the configuration structure has changed. You need to move your i18n configuration to a separate file called i18n.config.ts and reference it in your nuxt.config.ts file. 2. According to a Stack Overflow post about a similar issue, you should structure your configuration like this:

// i18n.config.ts
export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      welcome: 'Welcome'
    },
    fr: {
      welcome: 'Bienvenue'
    }
  }
}))

// i18n.config.ts
export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      welcome: 'Welcome'
    },
    fr: {
      welcome: 'Bienvenue'
    }
  }
}))

Then in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

This approach is mentioned in a Stack Overflow post as a solution for i18n issues after updating to newer Nuxt versions. There's also a GitHub issue (#31312) where a user mentioned that updating @nuxt/i18n to 9.3 fixed their issues with Nuxt 3.16.0. If you need to use number and date formatting, you'll also need to add the appropriate formats in your i18n.config.ts file as shown in another Stack Overflow post. For now, if you have many projects and need stability, staying on Nuxt 3.15.4 with i18n 8.5.6 might be a safer option until you can properly test and migrate each project to the new configuration format. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

kogratte•4w ago

I did the exact same migration not later than today. Have you tried to do it incrementally? Re. nuxt 16, nothing special to mention. Re. i18n, here is the only configuration I had to commit.

Gaming

Programming

$t doesn't work in Nuxt ^3.16.0 i18n ^9.3.1

Did you find this page helpful?