-
Notifications
You must be signed in to change notification settings - Fork 51
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hydration node mismatch: - Client vnode: svg #101
Comments
Same issue for me when I use |
This issue seems to have been fixed. There is no error when using {
"nuxt": "^3.8.0",
"nuxt-icon": "^0.6.1",
"vue": "^3.3.7"
} |
I'm running into the same kind of hydration issues with the latest version:
![]() |
Still on any workaround or updates? |
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 being an SSR-first framework, I believe it deserves the cleanest SSR solution for icons. I have proposed a shift towards
Unfortunately, the workaround would be to disable SSR on your project entirely, or render icons on the client side only by using Nuxt-specific 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. |
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>
tagThe text was updated successfully, but these errors were encountered: