Как сделать мобильную версию сайта?

Question

[Nikidze]

Мобильная версия сайта очень сильно отличается от ПК версии, но большая часть JS кода, похожа. Раньше, когда делал сайты на jquery это не вызывало никаких проблем, просто пишется такой JS код, который подходит для обоих версий сайта, все запросы перенаправляються на index.php, где уже подставляються нужные шаблоны. Сейчас же написал сайт на vue.js

Возникла проблема - так как я использовал однофайловые компоненты.
Мне в голову пришли такие варианты:
1. (Наверно костыльный) В каждый компонент вставить в pros'ах переменную mobile, и template будет содерать и мобильный и ПК компонент, которые будут переключаться в зависимости от версии.
2. Писать отдельные версии для телефонов и ПК, он это нврушает DRY, не так ли?

Вот и хочу задать вопрос тем, кто сталкивался с подобными ситуациями, и как вы из них вышли.
Заранее спасибо.

Answer 1

[bqio]

Сделать отдельный поддомен и для него с нуля сверстать мобильную версию. Серверный API оставить единый.

Answer 2

[Александр]

Бросать вызов званию программиста и писать универсальную разметку. )))
Если сделать не возможно (?) смотри ответ bqio )))

PS
Давно же есть флекс...

Comments

[Nikidze]

Флекс это про адаптив
Дизайнер сделал так, что мобильная версия кардинально отличаеться от ПК

[Александр]

Nikidze, Одним словом - ДИЗИГНЕР !!!

Он не виноват если ему была поставлена такая задача )))

Answer 3

[tvsjke]

Как вариант, заводим глобальную переменную

Vue.mixin({
    data() {
        return {
            isMobile: window.innerWidth < 768 , // поменять по своему вкусу
        }
    },
});

И дальше делаем что-то типа такого:

<div class="component">
  <ComponentDesktop v-if="!isMobile"></ComponentDesktop>
  <ComponentMobile v-else></ComponentMobile >
</div>