Getting Hydration Mismatches Even After Using ClientOnly

nuxt4

Hi there, i'm new to Nuxt, and I was experimenting with rendering modes.

I have the following code:
⁨⁨⁨

<!-- pages/index.vue -->
<template>
  <div>
    <ClientOnly>
      <RandomNum />
    </ClientOnly>
  </div>
</template>

<!-- pages/index.vue -->
<template>
  <div>
    <ClientOnly>
      <RandomNum />
    </ClientOnly>
  </div>
</template>

⁩⁩⁩

and the component RandomNum:
⁨⁨⁨

<!-- Components/RandomNum.vue -->
<script setup lang="ts">
const rando = Math.random() * 100;
</script>

<template>
  <p>{{ rando }}</p>
</template>

<!-- Components/RandomNum.vue -->
<script setup lang="ts">
const rando = Math.random() * 100;
</script>

<template>
  <p>{{ rando }}</p>
</template>

⁩⁩⁩

What happens?
I get the hydration error in the browser console: ⁨⁨⁨

hints:warn [hydration] Component RandomNum seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.

hints:warn [hydration] Component RandomNum seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.

⁩⁩⁩

What I expect to happen?
No hydration error because ClientOnly will only render the component in the client.

appreciate the help!

Nuxt•2w ago•

4 replies

nuxt4

Hi there, i'm new to Nuxt, and I was experimenting with rendering modes.

I have the following code:
⁨⁨⁨

<!-- pages/index.vue -->
<template>
  <div>
    <ClientOnly>
      <RandomNum />
    </ClientOnly>
  </div>
</template>

<!-- pages/index.vue -->
<template>
  <div>
    <ClientOnly>
      <RandomNum />
    </ClientOnly>
  </div>
</template>

⁩⁩⁩

and the component RandomNum:
⁨⁨⁨

<!-- Components/RandomNum.vue -->
<script setup lang="ts">
const rando = Math.random() * 100;
</script>

<template>
  <p>{{ rando }}</p>
</template>

<!-- Components/RandomNum.vue -->
<script setup lang="ts">
const rando = Math.random() * 100;
</script>

<template>
  <p>{{ rando }}</p>
</template>

⁩⁩⁩

What happens?
I get the hydration error in the browser console: ⁨⁨⁨

hints:warn [hydration] Component RandomNum seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.

hints:warn [hydration] Component RandomNum seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.

⁩⁩⁩

What I expect to happen?
No hydration error because ClientOnly will only render the component in the client.

appreciate the help!