Errors in the example

[alexandrmucha]

Hello, I found errors in the example that cause the 500 error:

Duplicate attribute: <circle :cx="composePoint(0.5, 0.5)[0]" :cx="composePoint(0.5, 0.5)[1]" r="5" style="fill: #f00;" />

Bad library name in import: import 'zoompich/style.css';

Even after fixing these errors it still doesn't work for me. A blank page appears, with no image on it. Can you help me please?

My code in Nuxt framework:

<template>
  <zoompinch
    ref="zoompinchRef"
    v-model:transform="transform"
    :width="1536"
    :height="2048"
    :offset="{ top: 10, right: 10, bottom: 10, left: 10 }"
    :min-scale="0.1"
    :max-scale="10"
    :rotation="true"
    :bounds="false"
    mouse
    touch
    wheel
    gesture
  >
    <template #canvas>
      <img src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public" style="width: 1536px; height: 2048px;" />
    </template>
    <template #matrix="{ composePoint }">
      <svg xmlns="http://www.w3.org/2000/svg" @click="handleClickOnLayer">
        <!-- This circle will stick to the center of the canvas -->
        <circle :cx="composePoint(0.5, 0.5)[0]" :cy="composePoint(0.5, 0.5)[1]" r="5" style="fill: #f00;" />
      </svg>
    </template>
  </zoompinch>
</template>

<script setup lang="ts">
import { Zoompinch } from 'zoompinch';
import 'zoompinch/style.css';

// Just the ref instance in which the component instance will live
const zoompinchRef = ref<InstanceType<typeof ProjectionLayer>>();

// A reactive transform object
const transform = ref({
  x: 0,
  y: 0,
  scale: 1,
  rotate: 1,
});

function handleClickOnLayer(event: MouseEvent) {
  const [x, y] = zoompinchRef.value?.normalizeMatrixCoordinates(event.clientX, event.clientY);

  console.log('clicked at', x, y);
}
</script>