Nuxt Cropper
Wrapper over Vue Advanced Cropper to make it easily integrate with Nuxt3.
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-cropperThat'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 in0to 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
Local development
# 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