Nuxt•4mo 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!

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Avoid hydration mismatch with viewport width