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

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