{"id":12539,"library":"vue-panzoom","title":"Vue Pan and Zoom Component","description":"The `vue-panzoom` library is a Vue.js plugin that provides intuitive pan and zoom capabilities for various DOM elements, including images, regular HTML content, and SVG. It serves as a Vue.js wrapper around the well-regarded `anvaka/panzoom` JavaScript library, inheriting its robust features and mobile-friendly design. The current stable version, 1.1.6, offers flexibility through attributes like `selector` to target specific elements within the component's scope and supports all options provided by the underlying `panzoom` library. Developers can also customize the component's name and listen to a comprehensive set of events, including its own `init` event and all `panzoom` lifecycle events, allowing for fine-grained control over the pan and zoom experience. While a strict release cadence isn't specified, the recent updates addressing Vue 3 compatibility (starting from v1.1.4) indicate active maintenance and adaptation to the Vue ecosystem's evolution. Its primary differentiator is its seamless integration into Vue applications, abstracting the complexities of direct `panzoom` library usage while exposing its full power.","status":"active","version":"1.1.6","language":"javascript","source_language":"en","source_url":"https://github.com/thecodealer/vue-panzoom","tags":["javascript","vue","zoom","pan"],"install":[{"cmd":"npm install vue-panzoom","lang":"bash","label":"npm"},{"cmd":"yarn add vue-panzoom","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-panzoom","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue.js framework. Versions >=1.1.4 require Vue 3, while versions <=1.1.3 require Vue 2.","package":"vue","optional":false},{"reason":"Core dependency for the underlying pan and zoom logic; this package is a Vue wrapper around it.","package":"panzoom","optional":false}],"imports":[{"note":"This is the default export used to install the plugin via `Vue.use()`.","wrong":"const panZoom = require('vue-panzoom')","symbol":"panZoom","correct":"import panZoom from 'vue-panzoom'"},{"note":"Registers the pan-zoom component globally for use in templates. An optional `componentName` can be passed as a second argument to customize the tag name.","symbol":"Vue.use","correct":"import panZoom from 'vue-panzoom'; Vue.use(panZoom);"},{"note":"This is the default component tag used in Vue templates after `Vue.use(panZoom)` has been called. If a `componentName` option was provided during installation, use that custom name instead.","symbol":"PanZoom component","correct":"<panZoom></panZoom>"}],"quickstart":{"code":"import Vue from 'vue'\nimport App from './App.vue'\nimport panZoom from 'vue-panzoom'\n\n// Install plugin, optionally change component name\nVue.use(panZoom, { componentName: 'MyPanZoomComponent' });\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app');\n\n// Example App.vue content:\n/*\n<template>\n    <div id=\"app\">\n        <!-- Apply to an image with custom options and event listener -->\n        <MyPanZoomComponent :options=\"{minZoom: 0.5, maxZoom: 5}\" @panstart=\"onPanStart\">\n            <img src=\"https://picsum.photos/300\">\n        </MyPanZoomComponent>\n\n        <!-- Apply to SVG with a specific selector -->\n        <MyPanZoomComponent selector=\"#svg-target\" @init=\"onInit\">\n            <svg height=\"210\" width=\"400\">\n                <g id=\"svg-target\">\n                    <path d=\"M150 0 L75 200 L225 200 Z\" />\n                </g>\n            </svg>\n        </MyPanZoomComponent>\n    </div>\n</template>\n\n<script>\nexport default {\n  methods: {\n    onPanStart(e) {\n      console.log('Pan started:', e);\n    },\n    onInit(panzoomInstance, id) {\n      console.log('Panzoom initialized for ID:', id);\n      panzoomInstance.on('zoom', (e) => {\n        console.log('Zoom event via instance:', e);\n      });\n    }\n  }\n}\n</script>\n*/","lang":"javascript","description":"Demonstrates global plugin installation with a custom component name, and basic usage within a Vue template showcasing pan/zoom on both DOM images and SVG elements, including custom options and event handling."},"warnings":[{"fix":"For Vue 2 projects, downgrade your `vue-panzoom` dependency to version 1.1.3: `npm install vue-panzoom@1.1.3`. For Vue 3 projects, ensure Vue 3 is correctly installed in your project.","message":"Version 1.1.4 and later of `vue-panzoom` introduced a breaking change by switching to `rollup-plugin-vue` version 6+, which requires Vue 3. Projects using Vue 2 must use an older version.","severity":"breaking","affected_versions":">=1.1.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"If your project uses Vue 2, you must install `vue-panzoom@1.1.3` to ensure compatibility: `npm install vue-panzoom@1.1.3`. If using Vue 3, verify your Vue setup is correct.","cause":"This error often indicates an incompatibility between the Vue version used in your project and the `vue-panzoom` package. Specifically, using `vue-panzoom` versions 1.1.4 or higher with a Vue 2 project.","error":"Error in main.js: \"Failed to mount app: mount must be called on an element that is not already mounted.\""},{"fix":"Ensure that `import panZoom from 'vue-panzoom'; Vue.use(panZoom);` is present and executed in your main application entry point (e.g., `main.js`) before your Vue application instance is created and mounted. Also, verify that if a custom component name was provided during installation (e.g., `Vue.use(panZoom, { componentName: 'MyZoom' })`), you are using that custom name (`<MyZoom>`) in your templates.","cause":"The `vue-panzoom` component was not properly registered as a Vue plugin before being used in a template. This can happen if `Vue.use(panZoom)` is omitted or called after the Vue app is mounted.","error":"[Vue warn]: Unknown custom element: <panZoom> - did you register the component correctly?"}],"ecosystem":"npm"}