Language Switcher with SSR not working

KuhlTime commented 7 months ago

Environment

Operating System: Darwin
Node Version: v20.8.1
Nuxt Version: 3.10.2
CLI Version: 3.10.1
Nitro Version: 2.8.1
Package Manager: bun@1.0.1
Builder: -
User Config: ssr, devtools, app, modules, css, hooks, i18n
Runtime Modules: @nuxt/devtools@1.0.8, @nuxtjs/i18n@8.1.1, @vueuse/nuxt@10.7.2, @nuxt/image@1.3.0, @pinia/nuxt@0.5.1, @nuxtjs/color-mode@3.3.2, unplugin-icons/nuxt, @nuxtjs/tailwindcss@6.11.4
Build Modules: -

Reproduction

I am using SSR, and I am using the language switcher example from the docs. I have adapted the example to use a <select> element instead of <a> links.

nuxt.config.ts

export default defineNuxtConfig({
  ssr: true,
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    strategy: 'no_prefix',
    langDir: 'lang/',
    detectBrowserLanguage: {
      useCookie: true,
      fallbackLocale: 'en'
    },
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en.json'
      },
      {
        code: 'de',
        iso: 'de-DE',
        name: 'Deutsch',
        file: 'de.json'
      }
    ]
  }
})

LanguageSwitcher.vue

<script lang="ts" setup>
const { locale, locales, setLocale } = useI18n()

function changeHandler(event: Event) {
  const target = event.target as HTMLSelectElement
  const newLocale = target.value
  setLocale(newLocale)
}
</script>

<template>
  <div>
    {{ locale }}
    <select v-bind:value="locale" @change="changeHandler">
      <option v-for="locale in locales" :key="locale.code" :value="locale.code">
        {{ locale.name }}
      </option>
    </select>
  </div>
</template>

Describe the bug

I would expect the selector to immediately have the right value available on page load. Still, when I reload the page, the selector does not show the selected language. In the video below, I would expect the application to select "Deutsch" as the value gets set to be "de" on page load.

https://github.com/nuxt-modules/i18n/assets/6073956/d71d1db1-4f9e-47a4-9306-6e6a01715c81

As can be seen in the video, the value attribute is correctly set to "de" on page load.

Additional context

No response

Logs

No response

github-actions[bot] commented 7 months ago

Would you be able to provide a reproduction? 🙏

More info

### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a couple of templates for starting with a minimal reproduction: 👉 [Reproduction starter (v8 and higher)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/v8) 👉 [Reproduction starter (edge)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/edge) A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

KuhlTime commented 7 months ago

Here is my reproduction of this issue: https://stackblitz.com/edit/nuxt-starter-qzsswn

BobbieGoede commented 7 months ago

Thanks for the reproduction!

I was able to reproduce this rendering issue without i18n, I have changed your reproduction to demonstrate here. This means this is either a Nuxt or Vue SSR issue, so I recommend opening an issue there (or checking if an issue exists).

I'm closing this as it's not caused by this module, but let me know and/or reference this issue if you open an issue or find the source of it, I'm sure others will run into it as well and we may add any workarounds to the docs if it is a common issue!

nuxt-modules / i18n