Introduce vue-advanced-cropper 🖼️ with Vue 3 - ts - Composition API

I just rewrite the minimum example in vue-advanced-cropper homepage with Vue 3, TypeScript and Composition API.

Preparing

A new project of Vue 3 with TypeScript, pnpm - package manager or npm, yarn...

Install vue-advanced-cropper - vue-next branch for Vue 3:

pnpm add vue-advanced-cropper@next
pnpm dev

Source-code detail in my repository - loclv/vue3-img-cropper.

Create simple app

<template>
  <div id="app">
    <Cropper
      class="cropper"
      :src="img"
      :stencil-props="{
        aspectRatio: 10 / 12,
      }"
      @change="change"
    />
  </div>
</template>

<script lang="ts" setup>
import { Cropper, type Coordinates } from "vue-advanced-cropper"
import "vue-advanced-cropper/dist/style.css"

/**
 * Photo by [Vasilis Karkalas](https://www.pexels.com/@vasilis-karkalas-155349971/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from Pexels
 */
const img = "https://images.pexels.com/photos/11301535/pexels-photo-11301535.jpeg"

const change = ({ coordinates, canvas }: { coordinates: Coordinates; canvas: HTMLCanvasElement}) => {
  console.log("🌳 ~ coordinates", coordinates)
  console.log("🚀 ~ canvas", canvas)
}
</script>

<style scoped>
.cropper {
  height: 600px;
}
</style>

Output