# VueCroppie
[](https://gitter.im/vue-croppie/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
VueCroppie is a [Vue](https://vuejs.org/) 2 wrapper for [Croppie](https://foliotek.github.io/Croppie/) a beautiful photo cropping tool for Javascript by [foliotek](http://www.foliotek.com/).
If you like this project, please give it a star, and consider following the author. :)
# Installation
### NPM
```bash
npm install vue-croppie --save
```
### CDN
`https://unpkg.com/vue-croppie/dist/vue-croppie.js`
### Usage with a bundler
TO use VueCroppie with Webpack, Parcel or other bundler
```js
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
import 'croppie/croppie.css' // import the croppie css manually
Vue.use(VueCroppie);
```
### Usage in Browser directly
```html
...
```
# Sample
This sample below will produce [this](https://jofftiquez.github.io/vue-croppie/).
```vue
```
### File Upload Sample
You can upload file instead of using direct image link.
*Usage*
In your form add a `file input` along with `vue-croppie` component.
```vue
VueCroppie is a [Vue](https://vuejs.org/) 2 wrapper for [Croppie](https://foliotek.github.io/Croppie/) a beautiful photo cropping tool for Javascript by [foliotek](http://www.foliotek.com/).
If you like this project, please give it a star, and consider following the author. :)
# Installation
### NPM
```bash
npm install vue-croppie --save
```
### CDN
`https://unpkg.com/vue-croppie/dist/vue-croppie.js`
### Usage with a bundler
TO use VueCroppie with Webpack, Parcel or other bundler
```js
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
import 'croppie/croppie.css' // import the croppie css manually
Vue.use(VueCroppie);
```
### Usage in Browser directly
```html
...
```
# Sample
This sample below will produce [this](https://jofftiquez.github.io/vue-croppie/).
```vue