This is how to get it working in Nuxt (or get rid of "document is not defined")

[Knogobert]

The issue is that document is not available when server-side rendering.

Create a plugin file with this name and content:

plugins/client-only.pinch-zoom.js:

import Vue from 'vue'

export default () => {
	const PinchZoom = require('vue-pinch-zoom')
	Vue.component('pinch-zoom', PinchZoom);
}

Then add this to your plugins in nuxt.config.js:

plugins: [{ src: 'plugins/client-only.pinch-zoom.js', mode: 'client'  }],

This will then globally register your component on the client-side only, and you will not get the error of " document is not defined" on build.

Hopefully this helps someone

[shi11]

thanks, this was helpful. However now Im getting

TypeError: Cannot read property 'tagName' of null at new IvyPinch (PinchZoom.umd.js:3962) at VueComponent.PinchZoom.init (PinchZoom.umd.js:4527) at VueComponent.PinchZoom.mounted (PinchZoom.umd.js:4477)

and TypeError: Cannot read property 'destroy' of undefined

[Chitzi]

Same here

[juventus18]

I am also getting the errors: TypeError: Cannot read property 'tagName' of null at new IvyPinch (PinchZoom.umd.js:3962) at VueComponent.PinchZoom.init (PinchZoom.umd.js:4527) at VueComponent.PinchZoom.mounted (PinchZoom.umd.js:4477)

and TypeError: Cannot read property 'destroy' of undefined

I am only doing a client build (no SSR)