Nuxt clientside only component

Question

I have a global component for rendering thumbnail collections. This global component uses Glightbox library to open / view the images. However it does not work serverside because it checks the browser / navigator. But wonder how I can disable / exclude the use of glightbox when rendering serverside ?

Here is my component :

<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>

The "import" statement triggers the error of "Navigator undefined". Any suggestion how to solve this ? Is there a clean way to to make a serverside and clientside version of the same component ?

I use it in other components like this :

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

I tried adding client-only, but that does not fix it.

I've also put the loading of the component in in plugin like this :

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

And then in my nuxt config :

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

But that doesn't work eighter :

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

user2425395 user2425395 · Accepted Answer · 2019-10-21T20:34:48

Ok, I found out what was wrong.

I was trying to do this :

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

But it should be like this :

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

Nuxt clientside only component

1 Answers