-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
Open
Description
Vue version
3.5.27
Link to minimal reproduction
Steps to reproduce
If I add :alt="t('Ville de Québec l’accent d’Amérique')" this to my <img src="...">, then I get a Hydration attribute mismatch if i run pnpm build && pnpm preview.
<img
class="quebec-city-logo"
src="@/assets/img/ville-quebec.svg"
:alt="t('Ville de Québec l’accent d’Amérique')"
width="276"
height="81"
/>Hydration attribute mismatch on
<img class="quebec-city-logo" src="/_nuxt/ville-quebec.Ctek8D92.svg" alt="Partenaires" width="276" height="81">
Everything is fine if I run pnpm run dev.
Notice that, on the server-side, the domain is not in the url, but on the client it is.
I think this is what is causing the mismatch.
These alt don't seem to cause problem:
<img
class="quebec-city-logo"
src="@/assets/img/ville-quebec.svg"
:alt="'Ville de Québec l’accent d’Amérique'"
width="276"
height="81"
/>
<img
class="quebec-city-logo"
src="@/assets/img/ville-quebec.svg"
alt="Ville de Québec l’accent d’Amérique"
width="276"
height="81"
/>What is expected?
No hydration mismatch
What is actually happening?
Hydration mismatch
System Info
System:
OS: macOS 26.2
CPU: (8) arm64 Apple M1 Pro
Memory: 169.63 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 24.4.1 - /Users/sleblanc/.nvm/versions/node/v24.4.1/bin/node
npm: 11.4.2 - /Users/sleblanc/.nvm/versions/node/v24.4.1/bin/npm
pnpm: 10.14.0 - /Users/sleblanc/.nvm/versions/node/v24.4.1/bin/pnpm
Browsers:
Chrome: 144.0.7559.97
Chrome Canary: 146.0.7654.0
Edge: 144.0.3719.92
Firefox: 146.0
Safari: 26.2
npmPackages:
vue: ^3.5.27 => 3.5.27Any additional comments?
Relates to nuxt/nuxt#34207
Relates to nuxt-modules/i18n#3881
Reactions are currently unavailable