@composy/cropper-vue

@composy/cropper-vue

Vue 3 adapter for @composy/cropper-core. It exports a component, composable, directive, and plugin while keeping all rendering and image-processing behavior in the core package.

Usage

<script setup lang="ts">
import { Cropper } from '@composy/cropper-vue'
import '@composy/cropper-vue/style.css'
</script>

<template>
  <Cropper
    src="/images/photo.jpg"
    ratio="16:9"
    crop-box-style="rounded"
    output-format="blob"
    :style-vars="{
      'color-accent': 'var(--ld-primary-500)',
      'toolbar-button-size': 'var(--ld-px-16)',
    }"
  />
</template>

Load the global LDesign color and size token styles before the cropper stylesheet. The Vue stylesheet imports the core cropper CSS.

Component

<Cropper /> accepts the core cropper options as props, plus Vue-friendly props:

• src / v-model for image source.
• ratio for named aspect ratios: free, square, 4:3, 3:4, 16:9, 9:16, 2:1, 1:2, 3:2, 2:3.
• outputFormat, outputType, outputQuality, maxOutputWidth, maxOutputHeight for export result handling.
• themeColor and styleVars for tokenized runtime styling.

Exposed methods include getCropper(), crop(), getCroppedResult(), getCroppedCanvas(), replace(), reset(), clear(), rotateLeft(), rotateRight(), flipH(), flipV(), zoomIn(), zoomOut(), setZoom(), setAspectRatio(), setStyle(), setDragMode(), setOptions(), getSnapshot(), restoreSnapshot(), getOperationGraph(), applyOperationGraph(), clearOperationGraph(), download(), and copyToClipboard().

Composable

import { ASPECT_RATIOS, useCropper } from '@composy/cropper-vue'
import { ref } from 'vue'

const containerRef = ref<HTMLElement>()
useCropper(containerRef, {
  src: '/images/photo.jpg',
  aspectRatio: ASPECT_RATIOS.square,
  autoInit: true,
})

The composable forwards the same snapshot and operation graph methods as the Core instance, so draft persistence does not require a second Vue-side state model.

Directive

<template>
  <div
    v-cropper="{
      src: '/images/photo.jpg',
      aspectRatio: 1,
      styleVars: { 'color-accent': 'var(--ld-primary-500)' },
      onReady: cropper => console.log(cropper),
    }"
  />
</template>

Use getCropperInstance(el) to retrieve the directive-owned core instance.

Class And Token Contract

The Vue wrapper root class is ldesign-cropper-vue. Core runtime classes use the ldesign-cropper* namespace. Styling is controlled by component variables with the --ldesign-cropper-* prefix, backed by generated --ld-* color and size tokens.

Build Outputs

The package uses @composy/builder and emits:

• dist/index.js, dist/index.min.js, dist/index.css, dist/style.css
• es/index.js
• esm/index.js
• lib/index.cjs

Run locally:

corepack pnpm --dir packages/vue run type-check
corepack pnpm --dir packages/vue run type-check:cjs
corepack pnpm --dir packages/vue run build

Builder, TypeScript, and ESLint authority configs live in .ldesign/; the package-root config files remain compatibility entry points.