Nuxt Cropper

Wrapper over Vue Advanced Cropper to make it easily integrate with Nuxt3.

• ✨  Release Notes
• 🏀 Online playground

Features

• ⚡️  Lazily imported and pre-configured VueAdvancedCropper.
• 🚠  Handy composable - useImageCropper() to abstract away all the complexity.
• 🌲  Very stable thanks to Vue Advanced Cropper

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-cropper

That's it! You can now use Nuxt Cropper in your Nuxt app ✨

Demo

See 🏀 Online playground to get a better understanding.

Usage

<image-cropper>

The actual Cropper component to mount on screen.

useImageCropper(cropperRef, options)

• cropperRef: Ref<InstanceType<typeof Cropper> | null> Ref to the Cropper component.
• options:
  • maxInputFileSizeInBytes: Maximum input file size expressed in bytes. Pass in 0 to disable the check.

Returns an object with following properties: | Field | Type | Usage | | -------- |-----| ------- | | image | Ref<{ src?: string; type?: string }> | Ref to the actual image selected by user | | blobURL| Ref<string> | URL of the blob of selected image. | | croppedBlob | Ref<Blob> | Ref to cropped blob, use this to upload image to server | | croppedBlobURL | Ref<string> | URL of the cropped blob. | | crop | Function | Trigger this when user finishes the selection | | reset | Function | Trigger this to clear selection and revert back to original state | | loadImageFromEvent | Function | Helper to load image directly from File Selector | | loadImageFromFile | Function | Helper to load image from File | | validationError | Ref<boolean> | Boolean indicating if there is error from user end. | | validationErrorMessage | Ref<string> | String containing error message |

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release