[QUESTION] How to use with nuxt?

[aesyondu]

Has anyone figured out how to use this with nuxt?

I keep getting `Object(...) is not a function`:

```javascript client.js?06a0:97 TypeError: Object(...) is not a function at Proxy.render (vue-panzoom.esm.js?2d7e:107) at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548) at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4055) at Watcher.get (vue.runtime.esm.js?2b0e:4479) at new Watcher (vue.runtime.esm.js?2b0e:4468) at mountComponent (vue.runtime.esm.js?2b0e:4073) at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415) at init (vue.runtime.esm.js?2b0e:3118) at createComponent (vue.runtime.esm.js?2b0e:5978) at createElm (vue.runtime.esm.js?2b0e:5925) TypeError: this.$el.querySelector is not a function at VueComponent.scene (vue-panzoom.esm.js?2d7e:38) at Watcher.get (vue.runtime.esm.js?2b0e:4479) at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584) at VueComponent.computedGetter [as scene] (vue.runtime.esm.js?2b0e:4836) at VueComponent.mounted (vue-panzoom.esm.js?2d7e:28) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at callHook (vue.runtime.esm.js?2b0e:4219) at Object.insert (vue.runtime.esm.js?2b0e:3139) at invokeInsertHook (vue.runtime.esm.js?2b0e:6346) at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565) ```

My setup:

// nuxt.config.js
plugins: [
    '@/plugins/panzoom.js'
]

// plugins/panzoom.js
import Vue from 'vue'
import panZoom from 'vue-panzoom'

Vue.use(panZoom);

// MyComponent.vue
<template>
        <panZoom selector=".class-selector">
          <svg class="class-selector">
          </svg>
        </panZoom>
</template>

I also tried the basic example in the readme, but it has the same error:

        <panZoom selector=".zoomable">
          <div class="not-zoomable">I cannot be zoomed and panned</div>
          <div class="zoomable">I can be zoomed and panned</div>
        </panZoom>

vue-panzoom@1.1.4 nuxt@2.15.4 node@14.15.1

EDIT: Webpack also shows this error, not sure what it means yet:

[HMR] bundle 'client' has 4 warnings
client.js?1b93:196 ./node_modules/vue-panzoom/dist/vue-panzoom.esm.js 111:22-33
"export 'createBlock' was not found in 'vue'./node_modules/vue-panzoom/dist/vue-panzoom.esm.js 113:6-17
"export 'createVNode' was not found in 'vue'./node_modules/vue-panzoom/dist/vue-panzoom.esm.js 111:9-18
"export 'openBlock' was not found in 'vue'./node_modules/vue-panzoom/dist/vue-panzoom.esm.js 113:38-48
"export 'renderSlot' was not found in 'vue'

[aesyondu]

Found it https://stackoverflow.com/a/63210803:

Update 1.1.4 uses rollup-plugin-vue@6.0.0. This should probably be mentioned somewhere in the docs.

Solution:

npm install vue-panzoom@1.1.3

[tvld]

Can confirm that on 1.1.6 it is still not solved. npm install vue-panzoom@1.1.3 was solution for me as well.