How can I apply this into nuxt.js?

[argylrebanal]

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]

  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]

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]

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]

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

[Tom-Shorter]

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]

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

[yanick]

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]

It might be possible to add a v-if=process.client into calling of the svgpanzoom element within the template so it only renders client side, this probably wouldn't work but it's worth checking. I'll admit that I resolved my issue by adding a v-on:zoom (I think, it was something like this but I'm currently not at work and my brain has switched off) to a normal svg and called a zoom function instead of using svgpanzoom Get Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: Yanick Champoux <[email protected]> Sent: Saturday, June 8, 2019 5:04:08 PM To: yanick/vue-svg-pan-zoom Cc: Shorter, Tom; Comment Subject: Re: [yanick/vue-svg-pan-zoom] How can I apply this into nuxt.js? (#2) 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 — You are receiving this because you commented. Reply to this email directly, view it on GitHub<https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fyanick%2Fvue-svg-pan-zoom%2Fissues%2F2%3Femail_source%3Dnotifications%26email_token%3DAF7SMQ3VFDZRY5Y72ZDUGFLPZPJ7RA5CNFSM4GL5H5PKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXHXNTQ%23issuecomment-500135630&data=02%7C01%7Cts339%40leicester.ac.uk%7C2e8357f0569b4be1fd0808d6ec2af116%7Caebecd6a31d44b0195ce8274afe853d9%7C0%7C0%7C636956066521243339&sdata=DoGxTWcb9AknkkoBd8rzfrG4X9N0DGWaIsaUaxWYnMg%3D&reserved=0>, or mute the thread<https://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAF7SMQ7EBD7SWNHGH4WPHV3PZPJ7RANCNFSM4GL5H5PA&data=02%7C01%7Cts339%40leicester.ac.uk%7C2e8357f0569b4be1fd0808d6ec2af116%7Caebecd6a31d44b0195ce8274afe853d9%7C0%7C0%7C636956066521253343&sdata=6eQo13Of%2F8q7fdsxZg1DtXaZOMdvmVfYNwsFDmMSbDE%3D&reserved=0>.