SSR options

[Markvandersteen]

Hello thanks for the package, already using it in one of my projects. I do have a question however.

Is there a way to use this package with ssr/nuxt? If so it would be awesome if the readme contained an example, if not is something that is going to be added?

[imcvampire]

Hi @Markvandersteen,

I use this package with SSR and it works perfectly! What problem do you face now?

Just import it, use it as normal, you don't need any special code!

[Markvandersteen]

At the moment i'm getting some window not defined errors.

[Markvandersteen]

I got it working, i did need some extra code to make it work with nuxtjs.

[miottid]

Hi, @Markvandersteen what is the extra code you've added in order to get it work.

[lexcode]

Hey @Markvandersteen I am getting the same issue, could you paste your extra code solution in nuxt please?

[lexcode]

I found it,

plugins/lightbox.js

if (process.BROWSER_BUILD) {
  const VueTouch = require('vue-touch')
  Vue.use(VueTouch, { name: 'v-touch' })
}

nuxt.config.js

build: {
    vendor: ['vue-touch'],
}

[Markvandersteen]

@dmiotti @lexcode My approach was to use the System.import function. When the component is mounted. I import the things I need.

 async loadLightBox() {
        Promise.all([
          System.import('vue-touch'),
          System.import('vue-lazyload'),
          System.import('vue-image-lightbox')
        ]).then((modules) => {
          const VueTouch = modules.shift(),
            VueLazyLoad = modules.shift(),
            LightBox = modules.shift();

          Vue.use(VueTouch, {name: 'v-touch'});
          Vue.use(VueLazyLoad);
          Vue.component('lightbox', LightBox);
          this.lightboxReady = true;
        });
      },
    },
    async mounted() {
      this.loadLightBox();
    }
`

[sven-ra]

Edited for updated nuxt and vue-image-lightbox

An easy way to use it in Nuxt is like this:

Make a plugin file:

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
import LightBox from 'vue-image-lightbox'
require('vue-image-lightbox/dist/vue-image-lightbox.min.css')

Vue.use(VueLazyLoad)
Vue.component('light-box', LightBox)

Add the plugin to nuxt.config with SSR disabled:

plugins: [
  {
    src: '~/plugins/vue-lightbox-plugin.js',
    ssr: false
   }
 ]

Now you can use the 'light-box' component globally. It works only after you have mounted your component:

<template>
  <client-only>
    <light-box :images="lightBoxImages" />
  </client-only>
</template>