Nuxt.js bug

[ovsw]

Using nuxt 2, latest version of vue-gallery from NPM,

/plugins/vue-gallery.js:

import Vue from 'vue'
import VueGallery from 'vue-gallery'

Vue.component('gallery', VueGallery)

then

{ src: '~/plugins/vue-gallery.js', ssr: false }

Gallery is operational in dev mode but throws error:

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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

In productiuon mode, after build and start, gallery no longer operational. On click on gallery item throws error:

blueimp Gallery: Widget container not found. #blueimp-gallery

[ovsw]

Just to clarify: only the SSR part isn't working, if I visit the gallery from another page, in production, it works. Just on the initial render (access URL of the gallery page directly) it fails as described above.

[ovsw]

Found a fix, (might want to add this in the documentation) - need to wrap the vue-gallery component inside no-ssr tags. Following the example above, it wuld be like this, inside an SFC:

<template>
  <section>
     <no-ssr>
        <gallery 
          :images="images" 
          :index="index" 
          @close="index = null"/>
      </no-ssr>
.....

apparently it's not enough to set ssr: false when importing the plugin, you need to exclude the whole area that's displaying the enlarged images from SSR, otherwise it errors out. SEO won't be hurt since that section doesn't load any real content until user interaction (click on thumbnail) so it wouldn't contain any meaningful content on page load anyway.

[RobinCK]

Maybe you can help #3