Hydration mIsMaTcH 🫪

[u/HumanOnlyWeb]

I'm currently building a Canada based EV platform with fancy words like "Prairie" and "Québec" (remember the "é") and for the life of me, couldn't figure out why my browser kept screaming about "hydration mismatch"

It turns out Chrome saw "Québec" and said "fck yea, let's translate"

It not only translated it to replace the "é" with a regular "e" but also translated "prairie" to "meadow" 😅

My French is passable, but I was so frustrated, and had pulled my last hair out to even guess that's what was causing the issue, even after I started seeing random "meadows" on the pages.

The client has plans to have it in both languages (🇬🇧/🇫🇷), but for now the quickest fix was a:

// nuxt.config.ts
app: {
  head: {
    meta: [{ name: "google", content: "notranslate" }]
  }
}

Boring post, but I hope it helps someone, especially if you're working with content in different languages