SSR support about vue-displacement-slideshow

[AlbanCrepel]

Hi @nla1989 @andreasantonsson @SixBytesUnder @nataliawww @NikitaLoshchenin !
I am glad to announce that the bug is fixed in the last release of this component (v1.2.0) ! 🎉
It is now working in Nuxt projects in production mode. The problem came from the minification of build files from webpack...

[AlbanCrepel]

Hi @nataliawww and @NikitaLoshchenin , I am sorry I didn't have the opportunity to try nuxt.js yet... But when I do I'll have a look at your issue 👍

[andreasantonsson]

I'm running a universal nuxt.js (2.7.1) app. The <no-ssr> did the trick in development, but I'm still getting the i.setValue is not a function in production.

Anyone else having the same issue still?

[AlbanCrepel]

@nla1989 I know about the problem, and have already tried to have a look at it and fix it, without success. When a copy paste the component and use it in a nuxt project, it works. But when I use the library with the built files, it doesn't work because of the error you mentioned. I will try my best to fix this 🙏
And for your information, I also worked on a version implementing the displacement effect on videos ! But this will take time to deploy...

[NikitaLoshchenin]

Would be great to add SSR support so it works with nuxt.js too
Do you have any problems with production mode?
i.setValue is not a function in browser dev tols with default nuxt configuration.config.js

[nataliawww]

Would be great to add SSR support so it works with nuxt.js too
Do you have any problems with production mode?
i.setValue is not a function in browser dev tols with default nuxt configuration.config.js

Yes, I have the same problem

[SixBytesUnder]

I tried using it as a client side plugin in nuxt.js

plugins: [
	{ src: '~/plugins/vue-displacement-slideshow', mode: 'client' }
	// { src: '~/plugins/vue-displacement-slideshow', ssr: false } // pre nuxt 2.4.0
],

but it fails with error message:
[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"

@AlbanCrepel please look into integrating with nuxt :)

[AlbanCrepel]

Hi @SixBytesUnder ! I just started using Nuxt so I'll dig into this issue as soon as I can !

[SixBytesUnder]

Fantastic, thank you :)
If you're interested, I want to use your plugin to nicely change background images on my project here https://github.com/SixBytesUnder/infoboard

[AlbanCrepel]

Hi everyone !
@SixBytesUnder This syntax can't work :

plugins: [
{ src: '/plugins/vue-displacement-slideshow', mode: 'client' }
// { src: '/plugins/vue-displacement-slideshow', ssr: false } // pre nuxt 2.4.0
],

Because vue-displacement-slideshow is not a plugin, it's just a component.
So if you want to use it with nuxt, you can wrap it between <no-ssr></no-ssr> tags, as explained in the documentation here. It could look like this :

<no-ssr>
    <vue-displacement-slideshow />
</no-ssr>

I tried it and it works, both in development and in production. I hope this solution is suitable for you all @nataliawww @NikitaLoshchenin @SixBytesUnder !

[lna1989]

All setValue methods in the map are undefined in production mode with universal mode in Nuxt.js.

@AlbanCrepel Do you have any idea how to fix this error? I will be very grateful for any tip, as long as I have no idea what could be the problem. )