Ревью миксина Nuxt 2 определения устройства

Условие

Ревью миксина Nuxt 2 определения устройства

export default {
  data() {
    return { isMobile: window.innerWidth < 768 }
  }
}

Ответ

В Nuxt 2 при SSR window недоступен, а data() с единственным измерением не реагирует на resize. Для адаптивного оформления сначала рассмотрите CSS media queries.

Если флаг действительно нужен JavaScript, измеряйте после монтирования и очищайте listener:

export default {
  data() { return { isMobile: null }; },
  mounted() {
    this.updateDevice();
    window.addEventListener('resize', this.updateDevice);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateDevice);
  },
  methods: {
    updateDevice() { this.isMobile = window.innerWidth < 768; }
  }
};

null означает ещё неизвестный размер и должен одинаково обрабатываться сервером и первым клиентским рендером. Возможный визуальный сдвиг после mounted — дополнительный аргумент в пользу CSS; частые измерения при необходимости ограничивают.