nuxt-cropper
Simplify cropping images in Nuxt3
2,539
1
| Install | |
|---|---|
npm install nuxt-cropper |
|
| Latest Version: | 0.0.4 |
| Vue: | 3 |
| License: | MIT |
| Last Updated: | Jul 31, 2024 |
| Links: | GitHub · npm |
Maintainer: amandesai01
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-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 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
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.0.4 | ^3.0 | MIT | |
| 0.0.3 | ^3.0 | MIT | |
| 0.0.2 | ^3.0 | MIT | |
| 0.0.1 | ^3.0 | MIT | |
| 0.0.0 | ^3.0 | MIT |