Код, ссылающийся на плагин на стороне клиента, не работает даже внутри Nuxtтег - PullRequest
Новая
       19

Код, ссылающийся на плагин на стороне клиента, не работает даже внутри Nuxtтег

0 голосов
/ 20 июня 2019

У меня есть плагин nuxt / vue, основной функцией которого является динамическое определение точек останова или ширины окна.

import Vue from 'vue';

const breakpoint = {
  install: (Vue, { breakpoints }) => {
    Vue.prototype.$bp = Vue.observable({
      windowWidth: 0,
      isMobile: false,
      isTablet: false,
      isDesktop: false,
    })
    const updateOnResize = () => {
      Vue.prototype.$bp.windowWidth = window.innerWidth;
      Vue.prototype.$bp.isMobile = window.innerWidth < breakpoints.mobile;
      Vue.prototype.$bp.isTablet = window.innerWidth >= breakpoints.mobile && window.innerWidth < breakpoints.tablet;
      Vue.prototype.$bp.isDesktop = window.innerWidth >= breakpoints.tablet;
    }
    updateOnResize();
    window.addEventListener('resize', updateOnResize);
    window.addEventListener('orientationchange', updateOnResize);
  },
};

Vue.use(breakpoint, {
  breakpoints: {
    mobile: 768,
    tablet: 1024,
  },
});

В моем nuxt.config я только запускаю этот плагин на клиенте

{ mode: 'client', src: '~/plugins/breakpoint.js'}.

Внутри моих шаблонов, где я ссылаюсь на $bpпеременная, компоненты заключены в тег nuxt <no-ssr>.

например. 

 <no-ssr>
   <vue-modal
    :pivot-y="$bp.windowWidth < 992 ? 1 : 0.5"
    :transition="$bp.windowWidth < 992 ? 'fadeUp' : 'fade'"
   </vue-modal>
 </no-ssr>

Когда я делаю жесткое обновление (ssr) на странице с этим модалом, он ломается, потому что говорит, что $bp - это undefined.Мои вопросы:

Что делает <no-ssr>?

Насколько я понимаю, код внутри этого тега будет игнорироваться на стороне ssr, но я, очевидно, ошибаюсь.

Читает ли он часть шаблона на сервере, но просто не отображается?

Как я могу получить доступ к плагину на стороне клиента в моем шаблоне во время рендеринга на стороне сервера?

Заранее спасибо!

...