Hydration node mismatch: - Client vnode: svg

[Oluwafemi21]

This issue is caused because rendering on the server side does not render the icon until the client side. Although I temporarily fix this warning using the <ClientOnly> tag

[Sun-ZhenXing]

I think this is a serious bug, and it doesn't seem to have been a problem before I used Nuxt 3.7.

[shynline]

Same issue for me when I use v-show on an Icon or a component that has Icon somewhere inside it no matter the depth

[Sun-ZhenXing]

This issue seems to have been fixed. There is no error when using 0.6.1.

{
    "nuxt": "^3.8.0",
    "nuxt-icon": "^0.6.1",
    "vue": "^3.3.7"
}

[gertjanjansen]

I'm running into the same kind of hydration issues with the latest version:

• [email protected]
• nuxt 3.8.2
• [email protected]

[tguelcan]

Still on

• [email protected]

any workaround or updates?

[Endermanch]

I recently found a nice read on why server-side rendered websites require a completely different approach when rendering on both server and client side to not cause hydration mismatches. The official source (Iconify website) states that the only true solution to that would be utilization of a Shadow DOM. Read here: https://iconify.design/docs/iconify-icon/#ssr

With that said, nuxt-icon library is currently using @iconify/vue, which is not recommended by the Iconify author. He recommends using iconify-icon instead, which solves the hydration mismatch problem among many others when using SSR. Read here: https://github.com/vuetifyjs/vuetify/issues/7821#issuecomment-1876623426

Nuxt being an SSR-first framework, I believe it deserves the cleanest SSR solution for icons. I have proposed a shift towards iconify-icon here: https://github.com/nuxt-modules/icon/issues/139

Still on

• [email protected]

any workaround or updates?

Unfortunately, the workaround would be to disable SSR on your project entirely, or render icons on the client side only by using Nuxt-specific <ClientOnly> tag. I don't think disabling icons on the server side impacts SEO, so the latter would be your workaround of choice. My personal workaround was to uninstall the module and write my own wrapping <iconify-icon>. If you want to go the scenic path like me, there's also a tutorial for Nuxt developers: https://iconify.design/docs/iconify-icon/#nuxt. While it's sort of sluggish, it gets the job done and there are no more hydration mismatches.

However, I still do believe the root problem must be solved, and that is to move over to the SSR-friendly solution on an SSR-first framework.