{"id":12544,"library":"vue-photo-zoom-pro","title":"Vue Photo Zoom Pro","description":"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.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/mater1996/vue-photo-zoom-pro","tags":["javascript","vue","photo zoom","magnifying glass","magnifier","zoom"],"install":[{"cmd":"npm install vue-photo-zoom-pro","lang":"bash","label":"npm"},{"cmd":"yarn add vue-photo-zoom-pro","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-photo-zoom-pro","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the component to function within a Vue application.","package":"vue","optional":false}],"imports":[{"note":"The main component is exported as a default. It should be imported directly and then registered locally in a Vue component's `components` option.","wrong":"import { vuePhotoZoomPro } from 'vue-photo-zoom-pro'","symbol":"vuePhotoZoomPro","correct":"import vuePhotoZoomPro from 'vue-photo-zoom-pro'"},{"note":"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.","symbol":"CSS Stylesheet","correct":"import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'"}],"quickstart":{"code":"<template>\n  <vue-photo-zoom-pro :url=\"imgUrl\" :high-url=\"imgHighUrl\"></vue-photo-zoom-pro>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport vuePhotoZoomPro from 'vue-photo-zoom-pro';\nimport 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css';\n\nexport default defineComponent({\n  components: {\n    vuePhotoZoomPro,\n  },\n  setup() {\n    const imgUrl = 'https://via.placeholder.com/600x400/0000FF/FFFFFF?text=LowResImage';\n    const imgHighUrl = 'https://via.placeholder.com/1200x800/FF0000/FFFFFF?text=HighResImage';\n    return {\n      imgUrl,\n      imgHighUrl,\n    };\n  },\n});\n</script>","lang":"typescript","description":"Demonstrates how to install and integrate the `vue-photo-zoom-pro` component into a Vue 3 Single File Component, including the necessary CSS import."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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`.","message":"Versions 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.","severity":"gotcha","affected_versions":"3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"Cannot find module 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css' or its corresponding type declarations."},{"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.","cause":"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.","error":"[Vue warn]: Component provided is not an object or a function."}],"ecosystem":"npm"}