5 Best Image Cropper Components For Vue.js

What Is Image Cropper?

Image cropper is a commonly used UI component for cropping large images to fit a container before uploading them to the server.

An image cropper component usually creates a rectangular or square or circular cropping area in which the user can resize, move, rotate, zoom, crop images (e.g. avatars) on the client-side.

The Best Image Cropper

In this post, I’d like to introduce you to the 5 best Vue.js components we found around the web that help you create image cropping tools on modern web applications. I hope you like it.

1. vue-cropper


Demo Download

An elegant image cropper for Vue.js.

More features:

  • Image preview
  • Custom crop tool
  • Allows to move, zoom and rotate images
  • Returns base64 and blob data

2. vue-image-crop-upload


Demo Download

A pretty nice image crop & upload plugin for Vue.js applications.

More features:

  • Custom server-side API
  • Custom http method
  • Circle & square preview
  • Event handlers.
  • Supports 15+ languages.

3. vue-core-image-upload


Demo Download

Yet another Vue.js plugin to simplify the image crop & upload tasks on modern web applications.

More features:

  • Custom upload button
  • Allows to restrict the image extensions
  • Multiple image upload.
  • Allows to set the max/min image size
  • AJAX image uploading

4. croppa


Demo Download

A simple yet full-featured, mobile-friendly image cropper for Vue.js 2+ applications.


  • Drag and drop.
  • Image preview.
  • Scroll & pinch to zoom.
  • Rotatable.
  • Loading spinner.
  • Limit the max file size.
  • Auto resizing.
  • Image flipping.
  • Useful API.

5. vue-avatar-cropper

Vue Avatar Cropper

Demo Download

An easy and elegant image cropper for avatar upload.


  • Custom trigger event.
  • Moveable.
  • Zoomable
  • Custom aspect ratio.
  • Allows you to set the allowed meme type.
  • Event handlers.

More Resources:

You can find more image cropper under our image crop section.

You Might Be Interested In: