[Vue warn]: Hydration text content mismatch in <div> in SSR

[n4an]

Environment

Nuxi 3.6.5

RootDir: /home/demo
Nuxt project info:

---

• Operating System: Linux
• Node Version: v20.5.0
• Nuxt Version: 3.6.5
• Nitro Version: 2.5.2
• Package Manager: npm@9.8.0
• Builder: vite
• User Config: alias, app, csurf, dayjs, devtools, i18n, image, modules, pwa, runtimeConfig, security, viewport, vueEmail, vuetify
• Runtime Modules: @hebilicious/authjs-nuxt@0.2.0-beta.5, @nuxt/image@1.0.0-rc.1, @nuxtjs/i18n@8.0.0-rc.2, @pinia/nuxt@0.4.11, @vee-validate/nuxt@4.11.1, dayjs-nuxt@1.1.2, nuxt3-leaflet@1.0.10, nuxt-csurf@1.2.0, nuxt-security@0.14.4, nuxt-viewport@2.0.6, vue3-carousel-nuxt@1.1.0, vue-email/nuxt, vuetify-nuxt-module@0.5.6

• Build Modules: -

Reproduction

i18n: {
    // vueI18n: './i18n.config.ts'
    defaultLocale: 'en',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      // onlyOnRoot: true,
    },
    langDir: 'locales',
    // lazy: true,
    locales: [
      {
        code: 'en',
        file: 'en.json',
        iso: 'en-US',
        name: 'English',
      },
      {
        code: 'ru',
        file: 'ru.json',
        iso: ' ru-Ru',
        name: 'Русский',
      }
    ],
    noPrefixDefaultLocale: false,
    customRoutes: 'config',
    // parsePages: false,
    seo: false,
    strategy: 'prefix',
    // vueI18n: {
    //   fallbackLocale: 'en',
    //   // silentFallbackWarn: true,
    // },
    // vueI18nLoader: true,
  },

Describe the bug

[Vue warn]: Hydration text content mismatch in

Additional context

No response

Logs

No response

[n4an]

In terminal it write [intlify] Not found 'Hello' key in 'ru' locale messages., but after hidration it chage text to needed

[kazupon]

I've backed from short vacation.

Thank you for your reporting! To continue for debugging, We need a minimum reproduction code .

As mentioned in the issue guideline, we need minimal reproduction:

Please use a template below to create a minimal reproduction, and provide to us your issue cases 👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz

https://github.com/nuxt-modules/i18n/issues/new?assignees=&labels=pending+triage&projects=&template=bug-report.yml

Could you please provide a minimum reproduction in stackbliz or github repo? 🙏

[Me-Phew]

I think this is related to vuetify.

Here is a reproduction

Maybe this is also related to this issue because it looks exactly the same.

[kazupon]

@Me-Phew Yes. Your reproduction case is caused by vue-i18n version. That version is installed v9.2.2

[Me-Phew]

So is there any other fix or a workaround other than using yarn?

[AnthonyRuelle]

Same issue here locally .. Not related to vuetify @kazupon i vue-i18n v9.2.2 is the latest ..

nothing has changed on this side concerning me, the problem has been present since I left the version v8.0.0-beta.12

[kazupon]

I think you can work-around with override of package manager, such as overrides or resolution

When vue-i18n v9.3 will officially release, maybe I think vuetify and other ecosystem will support it. I believe that we will not face this issue.

[Me-Phew]

Thanks I fixed it for now by setting "overrides": { "vue-i18n": "9.3.0-beta.24" } in package.json

[kazupon]

close in-activity. if you have still issue, please you would open the issue as new.

thanks!