Customizable Mobile-friendly Image Cropper for Vue 2+ – croppa

Customizable Mobile-friendly Image Cropper for Vue 2+ – croppa

A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0.


A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.

try it out


  • Straightforward: What you see is what you get
  • Highly customizable: You can almost customize anything except the core functionalities
  • Mobile-friendly: Supports drag to move and pinch with two fingers to zoom on mobile devices
  • EXIF orientation: v0.2.0+ Support correctly show image with EXIF orientation

Browser Support

  • IE 10+
  • Firefox 3.6+
  • Chrome 6+
  • Safari 6+
  • Opera 11.5+
  • iOS Safari 6.1+
  • Android Browser 3+

Template Example

<croppa v-model="myCroppa"
        :placeholder="'Choose an image'"

NOTE: This is an almost-full-use example. Usually you don't need to specify so many props, because they all have default values. Most simply, you can even do:

<croppa v-model="myCroppa"></croppa>

Method Examples




Quick Start

1. Import vue-croppa into your vue.js project.

Using build tools:

npm install --save vue-croppa
import Vue from 'vue';
import Croppa from 'vue-croppa';

// If your build tool supports css module
import 'vue-croppa/dist/vue-croppa.css';

Not using build tools:

<link href="" rel="stylesheet" type="text/css">
<script src=""></script>

2. Now you have it. The simplest usage:

<croppa v-model="myCroppa"></croppa>
new Vue({
  // ... other vm options omitted
  data: {
    myCroppa: {}

  methods: {
    uploadCroppedImage() {
        blob => {
          // write code to upload the cropped image file (a file is a blob)
      ); // 80% compressed jpeg file

Live example:


  • Since v0.1.0, you can change the default component name to anything you want.
import Vue from 'vue';
import Croppa from 'vue-croppa';

Vue.use(Croppa, { componentName: 'my-image-cropper' });
<my-image-cropper v-model="myCroppa"></my-image-cropper>
  • Since v0.1.1, you can get the component object with Croppa.component. This is useful when you want to register the component by yourself manually.
Vue.component('croppa', Croppa.component);
// Register async component (Webpack 2 + ES2015 Example). More about async component:
Vue.component('croppa', () => import(Croppa.component));
  • Since v1.0.0, the v-modeled value and the ref both point to the same thing - the component itself. So you don't need to set v-model anymore if you have a ref on the component.
<croppa ref="myCroppa"></croppa>
// ...


Github Repository

Tags: #VueJs