@BarabanObivan

Nuxt 3 ssr при обновлении страницы показывает два компонента?

ssr: true в nuxt.config.ts

Всем привет, написал простой useResponsive

export default function useResponsive() {
  const isMobile = ref(false);
  const isTabled = ref(false);
  const isDesktop = ref(false);

  onMounted(() => {
    updateWidth();
    window.addEventListener('resize', updateWidth);
  });

  const updateWidth = () => {
    isMobile.value = window.innerWidth <= 640;

    isTabled.value = window.innerWidth > 640 && window.innerWidth <= 1280;

    isDesktop.value = window.innerWidth > 1280;
  };

  return {
    isMobile,
    isTabled,
    isDesktop
  };
}


на странице вызываю вот так

<div class="tw-py-0 tw-mb-6 xl:tw-py-7 xl:tw-mb-0">
        <LazyMediaMobilePageGallery v-if="isMobile"/>
        <LazyMediaPageGallery v-else/>
      </div>


<script lang="ts" setup>
  import useResponsive from '~/composables/useResponsive';

  const { isMobile, isTabled, isDesktop } = useResponsive();
</script>


при обновлении страницы (в мобильном режиме) идет скачек компонентов, сперва выходит компонент из isDesktop а потом он прячется и показывается компонент isMobile
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ответы на вопрос 1
Fragster
@Fragster
помогло? отметь решением!
Заверни в <ClientOnly>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы