lazy:true does not work with nuxt

[gileneusz]

Environment

---

• Operating System: Darwin
• Node Version: v20.5.0
• Nuxt Version: 2.17.1
• CLI Version: 3.7.3
• Nitro Version: -
• Package Manager: yarn@1.22.19
• Builder: webpack
• User Config: target, env, router, ssr, head, css, loading, plugins, components, buildModules, modules, axios, i18n, vuetify, build
• Runtime Modules: @nuxtjs/axios@5.13.6, @nuxtjs/i18n@7.3.1

• Build Modules: @nuxtjs/vuetify@1.12.3

  "dependencies": { "@nuxtjs/axios": "^5.13.6", "@nuxtjs/i18n": "^7.3.1", "core-js": "^3.15.1", "markdown-it": "^13.0.1", "marked": "^0.7.0", "nuxt": "^2.15.7", "vuetify": "^2.5.5" },

Reproduction

nuxt.config.js

  modules: [ '@nuxtjs/i18n'],
  i18n: {
    locales: [
      {
        code: 'en',
        file: 'en.json',
        iso: 'en-US'  
      },
      {
        code: 'pl',
        file: 'pl.json',
        iso: 'pl-PL'  
      }
    ],

    defaultLocale: 'en',
    lazy: true,
    langDir: 'locales/',
    vueI18n: {
      fallbackLocale: 'en'
    }

locales/en.json:

{
  "welcome": "Welcome"
}

locales/pl.json:

{
    "welcome": "Witaj"
}

index.vue:

<template>
<div>
<div>
{{ $t('welcome') }}
</div>
<div>
<button @click="changeLanguage('en')">English</button>
<button @click="changeLanguage('pl')">Polski</button>
</div>
</div>          
  </template>
<script>
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    }}
</script>

Describe the bug

with lazy:false, it's working correctly, with lazy:true, I've got this error inside console:

 [vue-i18n] Fall back to translate the keypath 'welcome' with 'en' locale.

Additional context

No response

Logs

No response

[BobbieGoede]

You should change your language switcher so that it updates the locale cookie and triggers navigation if necessary, like so:

changeLanguage(lang) {
  this.$i18n.locale = lang;
}}

Check out the v7 docs for more information.