vue-panzoom

library1.1.6jsnpmunverified

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.

web-framework

npm install vue-panzoom

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PANZOOM

vue-panzoom

web-frameworkjavascriptv1.1.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

panZoom

✓ import panZoom from 'vue-panzoom'

✗ const panZoom = require('vue-panzoom')

This is the default export used to install the plugin via `Vue.use()`.

Vue.use

✓ import panZoom from 'vue-panzoom'; Vue.use(panZoom);

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.

PanZoom component

✓ <panZoom></panZoom>

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.

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.

import Vue from 'vue' import App from './App.vue' import panZoom from 'vue-panzoom' // Install plugin, optionally change component name Vue.use(panZoom, { componentName: 'MyPanZoomComponent' }); new Vue({ render: h => h(App), }).$mount('#app'); // Example App.vue content: /* <template> <div id="app">  <MyPanZoomComponent :options="{minZoom: 0.5, maxZoom: 5}" @panstart="onPanStart"> <img src="https://picsum.photos/300"> </MyPanZoomComponent>  <MyPanZoomComponent selector="#svg-target" @init="onInit"> <svg height="210" width="400"> <g id="svg-target"> <path d="M150 0 L75 200 L225 200 Z" /> </g> </svg> </MyPanZoomComponent> </div> </template> <script> export default { methods: { onPanStart(e) { console.log('Pan started:', e); }, onInit(panzoomInstance, id) { console.log('Panzoom initialized for ID:', id); panzoomInstance.on('zoom', (e) => { console.log('Zoom event via instance:', e); }); } } } </script> */

Debug

Known issues

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

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.

affects: >=1.1.4

Errors

Common errors & fixes

Error in main.js: "Failed to mount app: mount must be called on an element that is not already mounted."

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.

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.

[Vue warn]: Unknown custom element: <panZoom> - did you register the component correctly?

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.

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.

Upgrade

Version history

1.1.6latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue.js framework. Versions >=1.1.4 require Vue 3, while versions <=1.1.3 require Vue 2.

panzoomrequiredCore dependency for the underlying pan and zoom logic; this package is a Vue wrapper around it.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/thecodealer/vue-panzoom ↗

packagehttps://www.npmjs.com/package/vue-panzoom ↗