Nuxt•13mo ago

Idk how to hydrate / execute client side only

When I have this code:

<script setup lang="ts">
const colorMode = useColorMode()
const img = useImage()
const background = computed(() => {
  const light = img('hero_yagami.jpg', { width: 2137 });
  const dark = img('hero_dark.jpg', { width: 2137 });
  return (colorMode.value === "light") ? { backgroundImage: `url('${light}')` } : { backgroundImage: `url('${dark}')` };
})
console.log(background);
</script>

<script setup lang="ts">
const colorMode = useColorMode()
const img = useImage()
const background = computed(() => {
  const light = img('hero_yagami.jpg', { width: 2137 });
  const dark = img('hero_dark.jpg', { width: 2137 });
  return (colorMode.value === "light") ? { backgroundImage: `url('${light}')` } : { backgroundImage: `url('${dark}')` };
})
console.log(background);
</script>

I get this console.warn message:

[Vue warn]: Hydration style mismatch on 
<article id="hero" style="background-image:url('/_…w_2137/hero_dark.jpg');" data-v-inspector="pages/index.vue:3:5" data-v-02281a80=""> 
  - rendered on server: style="background-image:url('/_ipx/w_2137/hero_dark.jpg');"
  - expected on client: style="background-image:url('/_ipx/w_2137/hero_yagami.jpg');"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/" vnode= 
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
 route= 
Object { fullPath: "/", hash: "", query: {}, name: "index", path: "/", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: "/" }
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=3 > 
  at <NuxtRoot>

[Vue warn]: Hydration style mismatch on 
<article id="hero" style="background-image:url('/_…w_2137/hero_dark.jpg');" data-v-inspector="pages/index.vue:3:5" data-v-02281a80=""> 
  - rendered on server: style="background-image:url('/_ipx/w_2137/hero_dark.jpg');"
  - expected on client: style="background-image:url('/_ipx/w_2137/hero_yagami.jpg');"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/" vnode= 
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
 route= 
Object { fullPath: "/", hash: "", query: {}, name: "index", path: "/", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: "/" }
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=3 > 
  at <NuxtRoot>

And background image is dark, even though system theme, and subsequently the page, is light.

4 Replies

Quantix•13mo ago

what is useColorMode looks like when its rendered on the server thats dark mode but on the client its light mode meaning the computed returns two different images i found a related issue saying that you should try it in the onMounted function https://github.com/vueuse/vueuse/issues/1378 atm i cant test since im on my phone https://github.com/vueuse/vueuse/issues/2035 additional issue with more details

𝔪𝔟𝔩𝔢OP•13mo ago

I solved this by using a different approach, but thank you for your response how can i create global ref, when using onMounted?

Quantix•13mo ago

i'd expect you'd but some arbitrary default value top level and have it overwrite that but it's not ideal

Unknown User•13mo ago

Message Not Public

Gaming

Programming

Idk how to hydrate / execute client side only

Did you find this page helpful?