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>

No replies yet

Join the Discord to continue the conversation

Nuxt

Nuxt Community Chat Server

31,632 Members

Join

Avoid hydration mismatch with viewport width

Avoid hydration mismatch with viewport width

No replies yet

Nuxt

No replies yet

Nuxt

Similar Threads