[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`:

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.