Пересекаются стили в nuxt js?

Question

[SM_ST]

есть главная страница, в ней я проверяю, если зашли с телефона, то привязываем к шаблону mobile, иначе по дефолту

получается, когда я захожу с телефона, мне выдает и стили с компонента MobileHeader(шаблон mobile-default) и с компонента Header (шаблон default) и когда с компа, тоже стили с двух компонентов

как от этого избавиться?

<script>
export default {
  layout: ({ $device }) => $device.isDesktop ? 'default' : 'mobile-default',
}
</script>

в шаблоне mobile-default я вызываю header для мобильных

<template>
  <div :class="$style.header">
    <header>
    </header>
  </div>
</template>

<style lang="scss" module>
header {
  background-color: var(--theme-second-color);
  height: 48px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 0 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

в default для остальных устройств

<template>
  <div :class="$style.header">
    <header>
    </header>
  </div>
</template>

<style lang="scss" module>
header{
  background-color:var(--theme-second-color);
  height: 60px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 0 7.5px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

Comments

[golentor]

Первая мысль которая посещает - Вы уверены что Ваши условия вообще тут работают?
Обычно помогает простая отладка
style1 body{background:red} вешаете на mobile style2 body{background:black} на монитор и смотрите как меняется фон если тянуть окно.

Answer 1

[Дмитрий]

для локализации стилей в vue используется scoped
<style scoped>и тогда они применяются только к этому компоненту.

для подгрузки шаблона можно использовать динамический компонент.

<component :is="layout">
      <router-view/>
    </component>

computed: {
    layout() {
      return "admin-layout";
    }
  },

Но я полагаю, что вы так и делаете, просто выдернули из контекста.
Так что scoped

Comments

[SM_ST]

немного не понял про это

<component :is="layout">
      <router-view/>
    </component>

я на странице, я делаю такую проверку

<script>
export default {
  layout: ({ $device }) => $device.isDesktop ? 'default' : 'mobile-default',
}
</script>

[Дмитрий]

SM_ST, а дальше то как компонент подгружается?

Посмотрите в доках есть раздел - динамические компоненты. Это то, Вам нужно.

А заизолировать стили - я выше написал.

Scoped. И тогда они будут применяться только к этому компоненту и не будет пересечений.

Ну а глобальными, уверен, вы умеете пользоваться

[SM_ST]

Дмитрий, v-if $device. А дальше внутри идут компоненты