# nuxt-cropper

> Simplify cropping images in Nuxt3

Latest version **0.0.4** (published 2024-07-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuxt-cropper
pnpm add nuxt-cropper
yarn add nuxt-cropper
bun add nuxt-cropper
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2024-07-31 |
| First published | 2024-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | amandesai01 |

## Links

- npm: https://www.npmjs.com/package/nuxt-cropper
- Repository: https://github.com/amandesai01/nuxt-cropper
- Homepage: https://github.com/amandesai01/nuxt-cropper#readme
- Issues: https://github.com/amandesai01/nuxt-cropper/issues
- npm.io page: https://npm.io/package/nuxt-cropper

## Dependencies (2)

- [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^3.11.2
- [vue-advanced-cropper](https://npm.io/package/vue-advanced-cropper.md) ^2.8.8

## Recent versions

- 0.0.4 (latest) — 2024-07-31
- 0.0.3 — 2024-07-25
- 0.0.2 — 2024-07-25
- 0.0.1 — 2024-04-08
- 0.0.0 — 2024-04-08

## README

<!--
Get your module up and running quickly.

Find and replace all on all files (CMD+SHIFT+F):
- Name: Nuxt-Cropper
- Package name: nuxt-cropper
- Description: Simplify cropping images in Nuxt3
-->

# 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](https://advanced-cropper.github.io/vue-advanced-cropper) to make it easily integrate with Nuxt3.

- [✨ &nbsp;Release Notes](/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/your-org/nuxt-cropper?file=playground%2Fapp.vue)
<!-- - [📖 &nbsp;Documentation](https://example.com) -->

## Features

<!-- Highlight some of the features your module provide here -->

- ⚡️ &nbsp;Lazily imported and pre-configured VueAdvancedCropper.
- 🚠 &nbsp;Handy composable - `useImageCropper()` to abstract away all the complexity.
- 🌲 &nbsp;Very stable thanks to [Vue Advanced Cropper](https://advanced-cropper.github.io/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
See [🏀 Online playground](https://stackblitz.com/github/your-org/nuxt-cropper?file=playground%2Fapp.vue) 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

<details>
  <summary>Local development</summary>
  
  ```bash
  # 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
  ```

</details>

<!-- Badges -->

[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

---
_Source: https://npm.io/package/nuxt-cropper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._