Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR support #10

Closed
nataliawww opened this issue Jan 11, 2019 · 11 comments
Closed

SSR support #10

nataliawww opened this issue Jan 11, 2019 · 11 comments
Labels
enhancement New feature or request

Comments

@nataliawww
Copy link

Would be great to add SSR support so it works with nuxt.js too

@NikitaLoshchenin
Copy link

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

@AlbanCrepel
Copy link
Owner

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 👍

@AlbanCrepel AlbanCrepel added the enhancement New feature or request label Jan 12, 2019
@nataliawww
Copy link
Author

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

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
Copy link
Owner

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

@SixBytesUnder
Copy link

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
Copy link
Owner

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 !

@andreasantonsson
Copy link

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?

@lna1989
Copy link

lna1989 commented Jun 18, 2019

All setValue methods in the map are undefined in production mode with universal mode in Nuxt.js.
image
@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. )

@AlbanCrepel
Copy link
Owner

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

@AlbanCrepel
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

6 participants