Nuxt клиент только компонент - PullRequest
Новая
       95

Nuxt клиент только компонент

0 голосов
/ 21 октября 2019

У меня есть глобальный компонент для рендеринга коллекций миниатюр. Этот глобальный компонент использует библиотеку Glightbox для открытия / просмотра изображений. Однако он не работает на стороне сервера, потому что он проверяет браузер / навигатор. Но интересно, как я могу отключить / исключить использование glightbox при рендеринге сервера?

Вот мой компонент: 

<template>
  <div v-if="items.length > 0" class="gallery">
    <div v-for="(item, myindex) in items" :key="myindex" class="thumbcontainer">
      <a :href="item.source.version_900x900.url" :class="setLightBoxClass()">
        <div
          v-lazy:background-image="item.source.version_250x250.url"
          class="innerthumb"
          style="--aspect-ratio:1.33"
        />
      </a>
    </div>
  </div>
</template>

<script>
import GLightbox from 'glightbox'

export default {
  name: 'BaseGallery',
  inheritAttrs: false,
  props: {
    items: Array,
    galleryId: Number
  },
  data() {
    return {
      lightbox: undefined
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.initLightBoxes()
    })
  },
  methods: {
    setLightBoxClass() {
      return {
        glightbox: true,
        ['glightbox-' + this.galleryId]: true,
        thumblink: true
      }
    },
    initLightBoxes() {
      this.lightbox = GLightbox({ selector: 'glightbox-' + this.galleryId })
    }
  }
}
</script>

Оператор import вызывает ошибку «Navigator undefined». Любое предложение, как решить эту проблему? Есть ли чистый способ сделать серверную и клиентскую версию одного и того же компонента?

Я использую его в других компонентах, например так: 

<base-gallery :items="items" :gallery-id="123" />

Я пытался добавить только клиент, ноэто не исправляет это.

Я также поместил загрузку компонента в плагин, как это: 

Vue.component(componentName, componentConfig.default || componentConfig)

А затем в моей конфигурации nuxt: 

  plugins: [
    { src: '~/plugins/baseGallery', mode: 'client' }
  ],

Но это не сработает:

Виртуализированное виртуальное дерево DOM на стороне клиента не соответствует отображаемому на сервере содержимому. Вероятно, это вызвано неправильной разметкой HTML, например, вложением элементов уровня блока внутри

, или отсутствием. Отказ от гидратации и выполнение полного рендера на стороне клиента.

1 Ответ

1 голос
/ 21 октября 2019

Хорошо, я выяснил, что было не так.

Я пытался сделать это: 

<base-gallery client-only :items="items" :gallery-id="123" />

Но это должно быть так: 

<client-only>
  <base-gallery :items="items" :gallery-id="123" />
</client-only>
...