Warning: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

[frasza]

Environment

---

• Operating System: Windows_NT
• Node Version: v21.6.2
• Nuxt Version: 3.11.0
• CLI Version: 3.10.1
• Nitro Version: 2.9.4
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: -

---

Reproduction

https://github.com/frasza/i18n-warn

Spin up dev server, open dev tools and click on NuxtLink. Warning appears.

Describe the bug

Recently I noticed warning popup in my Nuxt project and I have tried to set up fresh Nuxt project with i18n dependacy and I still get warning when for navigating across pages.

Warning:

[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

Noticed that I get warning the moment I add i18n to the modules.

Additional context

No response

Logs

No response

[BobbieGoede]

I'm unable to reproduce this using your reproduction, I did have to update Nuxt to 3.11.1 or the dev server wouldn't run. Has this already been resolved?

[frasza]

I still have problem with warning even tho I am on Nuxt 3.11.1.

[BobbieGoede]

Do you get the warning using this updated reproduction? https://stackblitz.com/edit/frasza-i18n-warn-76cwcr?file=nuxt.config.ts

[frasza]

Yeah, I have downloaded the project, run it locally and I still get it 🤔

[BobbieGoede]

Ah after running it locally I get the same warning, looks like this happens when you add Nuxt I18n without configuring any locales. The module tries to navigate/redirect to a localized page but there are none, maybe we should add some checks to disable the module if nothing is configured.

[frasza]

Locally I have it configured tho.

i18n: {
    vueI18n: '@/i18n.config.ts',
  },

import en from '@/locales/en.json'
import si from '@/locales/si.json'

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'si',
  messages: {
    si,
    en,
  },
}))

Perhaps something here wrong as well...

[BobbieGoede]

Let me know if these changes fix it for you:

i18n: {
    vueI18n: '@/i18n.config.ts',
+   locales: ['en', 'si']
+   defaultLocale: ['si']
},

import en from '@/locales/en.json'
import si from '@/locales/si.json'

export default defineI18nConfig(() => ({
   legacy: false,
-  locale: 'si',
   messages: {
     si,
     en,
   },
}))

[frasza]

I see this forces locale in URL paht (e.g.: /si). How can I escape this, since we are not using locales in url pahts?

[BobbieGoede]

Check out the docs on routing strategies https://i18n.nuxtjs.org/docs/guide

[frasza]

Thank you.

Indeed! In this case I do not get warning. Now it is a bit 'weird' that configuration is split between the files but yeah, it seems to be working well.