Vue

First, follow the installation instructions to add the NPM package @fancyapps/ui.

Use this sample code for the Carousel Vue wrapper or create your own based on it:

<script>
import { ref } from "vue";

import { Panzoom } from "@fancyapps/ui/dist/panzoom/";
import "@fancyapps/ui/dist/panzoom/panzoom.css";

export default {
  props: {
    panzoomOptions: Object,
  },
  setup() {
    const fpzInstance = ref(null);

    return {
      fpzInstance,
    };
  },
  mounted() {
    this.fpzInstance = Panzoom(this.$refs.panzoom, {
      ...(this.panzoomOptions || {}),
    }).init();
  },
  updated() {
    this.fpzInstance?.destroy();

    this.fpzInstance = Panzoom(this.$refs.panzoom, {
      ...(this.panzoomOptions || {}),
    }).init();
  },
  unmounted() {
    if (this.fpzInstance) {
      this.fpzInstance.destroy();
      this.fpzInstance = null;
    }
  },
};
</script>

<template>
  <div class="f-panzoom" ref="panzoom">
    <slot></slot>
  </div>
</template>

Usage:

<Panzoom
  :panzoom-options="{
    // Your custom options
  }"
>
<div class="f-panzoom__wrapper">
  <img
    className="f-panzoom__content"
    src="https://lipsum.app/id/60/2000x1500"
    width="2000"
    height="1500"
    alt="Sample image"
  />
</div>
</Panzoom>