yanick/vue-svg-pan-zoom

How can I apply this into nuxt.js?

argylrebanal opened this issue · 8 comments

argylrebanal commented

I follow this code in the documentation but there seems to be a problem. I am using Nuxt.js is there a conflict?

<template>
    <div>
        <input type="button" value="center me" @click="center" />
        <SvgPanZoom style="width: 500px; height: 500px; border:1px solid black;"
            :fit="false"
            @svgpanzoom="registerSvgPanZoom"
        >
            <RawTiger />
        </SvgPanZoom>
    </div>
</template>

<script>
import RawTiger from './RawTiger.vue';
import SvgPanZoom from 'vue-svg-pan-zoom';

export default {
    components: {  SvgPanZoom, RawTiger },
    data: () => ({ svgpanzoom: null }),
    methods: {
        registerSvgPanZoom(svgpanzoom) {
            this.svgpanzoom = svgpanzoom;
        },
        center() {
            if( !this.svgpanzoom ) return;

            this.svgpanzoom.center();
        }
    },
}
</script>

I get this error
ReferenceError
window is not defined
Can you help me? I'm stack

argylrebanal commented 

  var prefix = "", _addEventListener, _removeEventListener, support, fns = [];
  var passiveOption = {passive: true};

  // detect event model
  if ( window.addEventListener ) {
    _addEventListener = "addEventListener";
    _removeEventListener = "removeEventListener";
  } else {
    _addEventListener = "attachEvent";
    _removeEventListener = "detachEvent";

          **This might support the problem**
yanick commented

Yup, looks like you found it. This plugin was written with client-side code in mind, not server-side. If you replace the if ( window.addEventListener ) { by if ( window && window.addEventListener ) {, does it behaves better?

argylrebanal commented

Hi, I am also using nuxt.js it worked fine in desktop but I would like to apply pinch to zoom in/out in mobile. Is there a way on how to apply it on nuxt.js?

PS: I didn't notice that I am the same person that opens the issue. hehe, pardon me.

yanick commented

I'm not sure I understand that last question...?

Tom-Shorter commented

I'm running into the problem of using this with nuxt.js as well.

It looks like the line identified above is part of the problem but the main problem is that during serverside rendering neither window not document are defined, both feature quite heavily in the code so fixing the one line doesn't help.

Also as window is not defined changing the line to if ( window && window.addEventListener ) { still results in the same error, instead you should use something like this instead typeof variable !== 'undefined'

yanick commented

I'll have to try to create a basic nuxt project using this package to see what can be done. But yeah, svg-pan-zoom is aimed squarely at the client-side. Maybe I can find a way to have the component just render the original svg on the server-side...

  • 👍1
yanick commented

Of course, there's the solution to entierely port svg-pan-zoom in vue. Shouldn't be too bad, but that'd require some serious tuits... :-P

Tom-Shorter commented