Does not work when used with Quasar Framework

[perochak]

Hey

I have tried to use it with Quasar framework but image does not display. Moverover when items/slides are assigned/updated dynamically i.e. via ajax it does not work too

[ph7jack]

use <q-no-ssr></q-no-ssr>

[perochak]

can you please give full guide of it?

[mapkbalaji]

@PH7-Jack I ve tried using but no use. The image is displayed, but on hovering, it's not displaying the zooming pane.

[mapkbalaji]

@perochak Did you have any success in using the component with Quasar?

[perochak]

no success

[raukaute]

I was facing a similar problem trying to make it work with Vue SSR, i.e. image as showing but no zoom on hover, and the overall positioning of the elements incorrect. The product zoomer injects the relevant styles (based on the image input) inline once the 'load' event is fired on window. Don't know the whole in depth explanation, but this event is never fired inside a component in a Vue, Vue-Router setup. Hence, the inline-style injection never happens. (Check the DOM, when working correctly you should have style-attributes on the relevant elements (base-container etc.)
In app.bundle.js change window.addEventListener("load") to t.$nextTick( ) and the whole thing should work (at least in my case it did).
Make sure to do some further testing, which I didn't. In the end I built my own component based on Drift that better suited my usecase.

Good luck!

[perochak]

@BobbySpoon Can you please share your solution

[raukaute]

@perochak I'll try to set something up, just very busy these days. Look into the docs here https://github.com/imgix/drift
It's fairly easy, just wrap a vue component round it. It should work with .
When importing the module in the server-render phase, it will get stuck in lib/ZoomPane.js (no dcument in Node...). I just wrapped the block in conditional, i.e.
if (typeof window !== 'undefined') {
/* lines 22 - 23 */
}

Hope that helps for now. Let me know if you run into any further complications.

Cheers