Привет! Подскажите, пожалуйста, правильный путь. Есть 2 компонента, 1 рисуется

Question

Привет! Подскажите, пожалуйста, правильный путь. Есть 2 компонента, 1 рисуется

на десктопе, второй на мобильном.

Переключаю компоненты через v-if, для логики что десктоп а что мобильный использую свой плагин, который детектит ширину страницы, и на ресайзе ее меняет. Инициализация ширины/высоты происходит на клиенте, т.к на сервере эти величины получить нельзя.

Компонент на десктопе весит много (там 3d через three.js рендерится), сделал его отдельным чанком через динамический импорт, не хочу что бы этот чанк грузился на мобилке. Но т.к инициализация ширины экрана происходит на клиенте (грубо говоря, после mounted хуков) - чанк для этого компонента энивей подгружается, даже на мобильном, где он показан не будет.

Подскажите, возможно нужно в таких случаях по user agent определять, а не по ширине? Или же это ок сделать внутри этого плагина флаг, например, isInitialized который будет говорить инициализирован ли плагин, и только после этого рендерить какой либо из компонентов?

#nuxt.js #programming #russian #software

0

04.01.2022