Registry / web-framework / vue-photo-zoom-pro

vue-photo-zoom-pro

JSON →
library3.0.1jsnpmunverified

Vue Photo Zoom Pro is a Vue.js component designed to provide image magnification functionality, enabling users to zoom into specific regions of a picture. It supports both Vue 2 and Vue 3 environments; version 3.x is compatible with Vue 3, while Vue 2 projects should explicitly install the 2.x branch. The current stable version is 3.0.1, which includes fixes for common Vue warnings. Key differentiators include its dual Vue version compatibility and customizable options for handling different image resolutions. The library is distributed via npm, requiring a separate import for its CSS styles. Releases are moderately paced, addressing bug fixes and minor features.

web-framework
npm install vue-photo-zoom-pro
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-PHOTO-ZOOM-PRO
V
vue-photo-zoom-pro
web-frameworkjavascriptv3.0.1
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.

vuePhotoZoomPro
✓ import vuePhotoZoomPro from 'vue-photo-zoom-pro'
✗ import { vuePhotoZoomPro } from 'vue-photo-zoom-pro'
The main component is exported as a default. It should be imported directly and then registered locally in a Vue component's `components` option.
CSS Stylesheet
✓ import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'
The component's essential styling is provided as a separate CSS file and must be explicitly imported into your project, typically in a global entry file or a root component.

Demonstrates how to install and integrate the `vue-photo-zoom-pro` component into a Vue 3 Single File Component, including the necessary CSS import.

<template> <vue-photo-zoom-pro :url="imgUrl" :high-url="imgHighUrl"></vue-photo-zoom-pro> </template> <script lang="ts"> import { defineComponent } from 'vue'; import vuePhotoZoomPro from 'vue-photo-zoom-pro'; import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'; export default defineComponent({ components: { vuePhotoZoomPro, }, setup() { const imgUrl = 'https://via.placeholder.com/600x400/0000FF/FFFFFF?text=LowResImage'; const imgHighUrl = 'https://via.placeholder.com/1200x800/FF0000/FFFFFF?text=HighResImage'; return { imgUrl, imgHighUrl, }; }, }); </script>
Debug
Known issues
breakingVersion 3.x of `vue-photo-zoom-pro` is specifically built for Vue 3. Attempting to use it in a Vue 2 project will result in runtime errors due to fundamental API differences. The installation instructions explicitly differentiate between Vue 2 and Vue 3 projects.
fix
For Vue 2 projects, install the 2.x branch explicitly: `npm install vue-photo-zoom-pro@2.x` or `yarn add vue-photo-zoom-pro@2.x`. For Vue 3, `npm install vue-photo-zoom-pro` (latest) is correct.
affects: >=3.0.0
gotchaThe component's visual appearance and proper functionality depend entirely on its bundled CSS stylesheet. Forgetting to import `vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css` will lead to an unstyled component.
fix
Ensure `import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'` is included in your application's entry point (e.g., `main.js`/`main.ts`) or within the `<style>` block of a root component if your build system supports it.
affects: >=2.0.0
gotchaVersions prior to 3.0.1 might emit a Vue warning regarding `v-on bind $listeners`. While often benign, such warnings can indicate suboptimal patterns or potential issues with component inheritance in Vue 3.
fix
Upgrade to `vue-photo-zoom-pro@3.0.1` or a later version to ensure the latest fixes and eliminate this specific warning from your console. Run `npm update vue-photo-zoom-pro` or `yarn upgrade vue-photo-zoom-pro`.
affects: 3.0.0
Errors
Common errors & fixes
Cannot find module 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css' or its corresponding type declarations.
The CSS file path is incorrect, or the `node_modules` directory is not correctly installed/resolved by your bundler, or the file genuinely doesn't exist.
fix
Verify the exact import path. Run `npm install` or `yarn install` to ensure all dependencies are correctly placed in `node_modules`. Check your bundler configuration for any custom path resolution rules.
[Vue warn]: Component provided is not an object or a function.
This error typically indicates that you are attempting to use the wrong major version of `vue-photo-zoom-pro` for your Vue project (e.g., v3.x in Vue 2, or v2.x in Vue 3), leading to incompatible component definitions.
fix
Install the correct version of `vue-photo-zoom-pro` matching your Vue project's version. Use `npm install vue-photo-zoom-pro@2.x` for Vue 2 or `npm install vue-photo-zoom-pro@latest` for Vue 3.
Upgrade
Version history
3.0.1latest on npm
Audit
Dependencies
vuerequiredRequired as a peer dependency for the component to function within a Vue application.
Agent activity
7 hits · last 30 days
node
6
OpenAI (training)
1
Resources
githubhttps://github.com/mater1996/vue-photo-zoom-pro ↗
packagehttps://www.npmjs.com/package/vue-photo-zoom-pro ↗
vue-photo-zoom-pro — npm install vue-photo-zoom-pro · libregistry