---
title: "VueJS image cropper"
description: "How to integrate the image cropper into a vue project."
source: https://jsuites.net/docs/v4/image-cropper/image-cropper-vue-example
---

{.white}
> A new version of the jSuites **JavaScript Cropper** plugin is available here.
> <br><br>
> [JavaScript Image Cropper](/docs/image-cropper){.button .main target="_top"}

* [Vue Image Cropper](/docs/v4/image-cropper)


Vue image cropper [working example](https://codesandbox.io/s/vue-image-cropper-z6kt4p) on codesandbox.
  

Component installation
----------------------

to install the component you must have npm. Navigate to the root of your project, and enter the command below

```bash
npm i @jsuites/cropper
```
  

Cropper component
-----------------

```vue
<template>
    <div ref="cropper" style="border: 1px solid #ccc"></div>
</template>
    
<script>
import cropper from "@jsuites/cropper";
import "@jsuites/cropper/cropper.css";

export default {
    name: "Cropper",
    props: {
        properties: Object,
    },
    mounted: function () {
        cropper(this.$refs.cropper, this.$props.properties);
    },
};
</script>
```

Component usage
---------------

```vue
<template>
    <div id="app">
        <h3>Select a image</h3>
        <span>image url: {{ value }} </span>
        <Cropper
            v-bind:properties="{
                value: value,
                onchange: handleCropperChange,
                area: [300, 250],
                crop: [200, 200],
                allowResize: true,
            }"
        />
    </div>
</template>

<script>
import Cropper from "./components/Cropper";

export default {
    name: "App",
    components: {
        Cropper,
    },
    data: function () {
        return {
            value: "",
        };
    },
    methods: {
        setValue: function (newValue) {
            this.value = newValue;
        },
        handleCropperChange: function (el, imgEl) {
            this.setValue(imgEl.src);
        },
    },
};
</script>
```