search

drewjbartlett / vue-flickity

A Vue Slider / Carousel Component for Flickity.js
http://drewjbartlett.com/demos/vue-flickity/
374 stars 55 forks source link

Does not work with Vue Server Renderer #27

Closed jordanranson closed 6 years ago

jordanranson commented 7 years ago

When I try to use this component with Vue SSR, I get the following error in the console:

ReferenceError: window is not defined
    at Object.module.exports.__WEBPACK_AMD_DEFINE_FACTORY__ (node_modules/flickity/js/index.js:39:1)
drewjbartlett commented 6 years ago

Looks like this is a flickity issue

rayfranco commented 6 years ago

@drewjbartlett this is not a flickity issue. I think what @jordanranson want is to pre-render the DOM server side, but vue-flickity will instantiate flickity automatically. Which for obvious reasons, should not happen on server side (as the error says, window is not defined)

It could be a good idea to let user choose if the init method should be called on mounted, or not. Maybe through an extra prop or an options, but I think the last is made to match Flickity API.

This option could be called something like ssr (if true then do not call init on mounted hook) or autoInit (if true call init on mounted hook)

I can make a PR if needed.

rayfranco commented 6 years ago

https://github.com/metafizzy/flickity/blob/master/js/index.js#L39

I can see here that the plugin call window a bit early, that might cause an issue as well. So, unfortunately, I see no option for vue-flickity to resolve this at this point...