Need SSR Support

[cavinpabua]

vue-expandable-image.js line 226 has a document.head but using SSR will throw an error document is not defined

[augnustin]

Indeed it would make sense to display the <img /> itself on the server side.

[abhishekfinhawk]

Is there at least a workaround that anyone can suggest? I'm using nuxt and facing the same issue with SSR.

[augnustin]

I did use:

        <client-only>
          <expandable-image class="no-stretch bg-click" :src="img" :close-on-background-click="true"></expandable-image>
        </client-only>

Along with the following in the plugins repository:

import Vue from 'vue';
import VueExpandableImage from 'vue-expandable-image';

Vue.use(VueExpandableImage);

And nuxt.config.js:

  plugins: [
    { src: '~/plugins/expandable-image', mode: 'client' },
  ],

But indeed, no SSR <img /> tag for now. :unamused:

[keshprad]

@augnustin Does anyone know how I'd use this with Nuxt for a static site? The expandable image works with dev script but not nuxt generate

[matichek]

I did use:

        <client-only>
          <expandable-image class="no-stretch bg-click" :src="img" :close-on-background-click="true"></expandable-image>
        </client-only>

Along with the following in the plugins repository:

import Vue from 'vue';
import VueExpandableImage from 'vue-expandable-image';

Vue.use(VueExpandableImage);

And nuxt.config.js:

  plugins: [
    { src: '~/plugins/expandable-image', mode: 'client' },
  ],

But indeed, no SSR <img /> tag for now. 😒

Hello, I still get the same error - no plugin found. Is this path really correct? ~/plugins/expandable-image

[Michael-Francalanci]

You need to create a file called expandable-image.js inside the plugin folder (if the folder is not already there, create one in the project root) that contains:

import Vue from 'vue';
import VueExpandableImage from 'vue-expandable-image';

Vue.use(VueExpandableImage);