Nuxt Cropper

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

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:

``bash
npx nuxi module add nuxt-cropper
`

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

Demo

- cropperRef: Ref | 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\ | URL of the blob of selected image. |
| croppedBlob | Ref\ | Ref to cropped blob, use this to upload image to server |
| croppedBlobURL | Ref\ | 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 indicating if there is error from user end. |
| validationErrorMessage | Ref\ | String containing error message |

Contribution

[npm-version-src]: https://img.shields.io/npm/v/nuxt-cropper/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-cropper
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-cropper.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/nuxt-cropper
[license-src]: https://img.shields.io/npm/l/nuxt-cropper.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-cropper
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com