MarcoB
MarcoB
PostsComments
NNuxt
Created by MarcoB on 8/7/2024 in #❓・help
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!
1 replies
NNuxt
Created by MarcoB on 6/27/2024 in #❓・help
NuxtI18n - Vue router warnings after language change
Hello everyone! Every time I change language with useSwitchLocalePath() of NuxtI18n I get all the route warnings (with the previous locale), does anyone know how to solve this? reproduction link: https://stackblitz.com/edit/nuxt-starter-1fg4xq?file=server%2Fapi%2Fmenu.get.ts,pages%2Findex.vue
1 replies