hyderation error with colorMode
I have an image that needs to be rendered with the classs
invert when th e browser is in dark mode. However when I try to set the class as a reactive value related to colorMode I get a hydration error.
The following correctly displays with no error (but is not visible when not viewed on dark mode)
This is what I am trying to apply:
I've also tried to use a v-if on the NuxtImg to deliver two different images with static classes, but that gives the same Hydration error.
I think the issue is related to colorMode returning system at initial load, and then setting dark, however that should just return the "wrong" class to begin with and then change..
The following is the error:
5 Replies
Hi @dankell.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The hydration error you’re experiencing is a common issue when using reactive values like
- On the server,
The Nuxt documentation recommends wrapping any client-only logic (like checking the color mode) in a
If you want to show different images or classes for light and dark modes, consider using the Nuxt UI ColorModeImage or ColorModeAvatar components, which are designed to handle this scenario without hydration issues: (You can adjust the
- Hydration errors occur when SSR and client-rendered HTML differ. - Use
colorMode to conditionally set classes or render elements in Nuxt, especially when the value is determined differently on the server and client. This often happens because the initial value of colorMode (such as 'system') during SSR does not match the value resolved on the client (like 'dark'), leading to a mismatch in the rendered HTML and the hydrated DOM, which Vue warns about as a hydration error.
Why this happens:- On the server,
colorMode.value might be 'system' or 'light', so the class is set to "".
- On the client, after hydration, colorMode.value updates to 'dark', so the class becomes "invert".
- This difference causes the hydration class mismatch warning you see.
How to avoid this:The Nuxt documentation recommends wrapping any client-only logic (like checking the color mode) in a
<ClientOnly> component. This ensures that the code only runs on the client, avoiding SSR/client mismatches. Here’s how you can apply it:
This approach is directly recommended for any browser-specific or client-only conditions to prevent hydration errors in Nuxt apps. The documentation also explains that using browser-only APIs or client state during SSR is a common cause of hydration mismatches, and wrapping such logic in <ClientOnly> is the solution Docs: Common reasons for hydration errors.
Alternative:If you want to show different images or classes for light and dark modes, consider using the Nuxt UI ColorModeImage or ColorModeAvatar components, which are designed to handle this scenario without hydration issues: (You can adjust the
class or image source as needed) ColorModeImage usage.
Summary:- Hydration errors occur when SSR and client-rendered HTML differ. - Use
<ClientOnly> for client-dependent logic like color mode.
- Consider Nuxt UI’s color mode-aware components for a more robust solution.
Let me know if you need a more specific example or further clarification!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@602890303753682944> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
what's your config for colorMode?
I was literally just using
const colorMode = useColorMode() to access the currently defined mode. Nothing elsetry setting the storage to cookies instead of localestorage