Nuxt•2y ago

Avoid hydration mismatch with viewport width

Hello everyone,
I need some advice, I sometimes have to render a different component depending on the size of the viewport.

e.g.

<template>
  <div>
    <MobileComponent v-if="width < 1024" />
    <DesktopComponent v-else />
  </div>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import MobileComponent from './components/MobileComponent.vue';
import DesktopComponent from './components/DesktopComponent.vue';

const { width } = useWindowSize();
</script>

<template>
  <div>
    <MobileComponent v-if="width < 1024" />
    <DesktopComponent v-else />
  </div>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import MobileComponent from './components/MobileComponent.vue';
import DesktopComponent from './components/DesktopComponent.vue';

const { width } = useWindowSize();
</script>

In a case like this, if the viewport is already larger than 1024px, there is no problem, because between server and client the template remains the same. But of course, if I reload the page with a size smaller than 1024px, the hydration mismatch warning appears in the console. Do you have any suggestions for me other than to use the ClientOnly component?
Thank you all!

Nuxt•2y ago

MarcoB

Avoid hydration mismatch with viewport width

Hello everyone,
I need some advice, I sometimes have to render a different component depending on the size of the viewport.

e.g.

<template>
  <div>
    <MobileComponent v-if="width < 1024" />
    <DesktopComponent v-else />
  </div>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import MobileComponent from './components/MobileComponent.vue';
import DesktopComponent from './components/DesktopComponent.vue';

const { width } = useWindowSize();
</script>

<template>
  <div>
    <MobileComponent v-if="width < 1024" />
    <DesktopComponent v-else />
  </div>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';
import MobileComponent from './components/MobileComponent.vue';
import DesktopComponent from './components/DesktopComponent.vue';

const { width } = useWindowSize();
</script>

Avoid hydration mismatch with viewport width

Similar Threads

Avoid hydration mismatch with viewport width

Similar Threads

Similar Threads

Similar Threads