Nuxt 仅客户端组件答案

【问题标题】：Nuxt clientside only componentNuxt 仅客户端组件
【发布时间】：2019-10-21 15:24:05
【问题描述】：

我有一个用于呈现缩略图集合的全局组件。这个全局组件使用 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 标记引起的，例如在

中嵌套块级元素

，或缺少 . Bailing hydration 并执行完整的客户端渲染。

【问题讨论】：

标签： vue.js server-side-rendering nuxt.js

【解决方案1】：

好的，我发现了问题所在。

我正在尝试这样做：

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

但应该是这样的：

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

【讨论】：