Всем привет. Вопрос: Как узнать ширину экрана на сервере или избежать

Question

Всем привет. Вопрос: Как узнать ширину экрана на сервере или избежать

ошибки гидрации из-за того что на сервере приложение отрендерилось для десктопа, а на клиенте ренедрится как для мобилки?

Описание:
У меня в приложении есть computed поле $IS_MOBILE, которое подключается ко всем компонентам vue через mixin в plugins nuxt.config.js

{
src: '@/plugins/mixins/nossr',
mode: 'client'
},

Эта переменная зависит от ширины экрана. Выставить её на сервере я не могу. Поэтому сейчас во время рендеринга на сервере она undefined. Соответсвенно во всех компонентах где она используется это приводится к false.

Потом во время гидрации на клиенте если экран меньше 768px она устанавливается в true.
И накст выдаёт ошибки гидрации, из-за того что на сервере всё отрендерилось как для десктопа.

Я знаю что могу использовать пакет nuxt-user-agent для опредеоения устройства на сервере, но он не показывает ширину устройства. Например 10 дюймовые планшеты должны получить desctop версию сайта, а 7 дюймовые мобильную.

#nuxt.js #programming #russian #software

0

07.05.2020

1 ответов

15 просмотров

DreaMinder · Accepted Answer

DreaMinder

попробуй костылем отсрочить переключение флага за пару мгновений после гидрации. сет таймаутом или $nextTick()

0

07.05.2020

207 похожих чатов

Всем привет. Вопрос: Как узнать ширину экрана на сервере или избежать

1 ответов

Похожие вопросы