Using v-html with $t is broken for SSG

[noah-nuebling]

Environment

---

• Operating System: Darwin
• Node Version: v20.5.1
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.11.0
• Builder: -
• User Config: ssr, devtools, modules, app, i18n
• Runtime Modules: @nuxtjs/i18n@8.0.0-rc.11
• Build Modules: -

---

Reproduction

1. Checkout this repo to your computer (I couldn't get it to work on Stackblitz)

   git clone git@github.com:noah-nuebling/bug-repro-nuxt-3-i18n-ssg-v-html.git

2. Render and serve the site statically

   pnpm install; pnpm generate; npx serve .output/public/

3. View the site by opening http://localhost:3000/ in your browser.
4. Click the "Make German" button. The text on the page will switch to German, and the url will change to http://localhost:3000/de-DE. In the background this will set a cookie that your language preference is German.
5. Open the base url http://localhost:3000/ again. This will now redirect you to http://localhost:3000/de-DE, because of the cookie. But the text on the page will remain English instead of changing to German.

Describe the bug

When users are redirected to a different language page, then the translations don't update correctly when using v-html with $t while using Static Site Generation.

Additional context

• This issue seems to not only occur with the cookie, but also when the user is redirected to the German site because of their browser language.
• I noticed that this issue only occurs if you use v-html like so

  <p v-html="$t(<some-key>)"></p>

  If you use

  <p>{{ $t(<some-key>) }}</p>`

  then the issue doesn't occur.
• Any workarounds or ideas would also be greatly appreciated. I would like to ship a site where this bug occurs. Thank you very much.

Logs

No response

[noah-nuebling]

I think #1888 might be related

[noah-nuebling]

I found a workaround. It's also in the reproduction repo under /plugins/language-redirect-fix.js

[BobbieGoede]

Thanks for investigating and reporting this issue! This issue sounds similar to something I ran into while debugging a different issue in this comment.

Perhaps you have already tried wrapping the element that uses v-html in <ClientOnly>, this may also work as a workaround but renders after load which may not suit your use case.

I'm not sure yet what the root cause of this issue is, will look into this more later.

[jheng-jie]

I encountered a similar issue, which might be related to this one.

// After executing generate, there is a pre-translation.
<h1>{{ t("website.title") }}</h1>

// But after using v-t generate, it is blank.
// After CSR, the translation appears, but this disrupts SEO.
<h1 v-t="'website.title'" />