Vue Photo Zoom Pro

3.0.1 · active · verified Sun Apr 19

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.

Common errors

```
Cannot find module 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css' or its corresponding type declarations.
```
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.

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

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.

Warnings

breaking 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.
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.
gotcha 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.
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.
gotcha 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.
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`.

Install

npm install vue-photo-zoom-pro npm
yarn add vue-photo-zoom-pro yarn
pnpm add vue-photo-zoom-pro pnpm

Imports

vuePhotoZoomPro
wrong:
```
import { vuePhotoZoomPro } from 'vue-photo-zoom-pro'
```
correct:
```
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.

Quickstart

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>

view raw JSON →