Using croppie in Vuejs for image crop and upload

In any application, a user’s profile with a functionality to crop and upload an image would be one of the most common functionality. I have done this as well man time and hence I decided why not create a re-useable component which can be easily taken from one project to another.

In this tutorial, I will show you how I use the Croppie JS library inside VueJs to create a component which lets user crop an image and then upload it to make that his profile pic. The application is Inferno app which I am creating as a demo of some of the things that I learn. So let’s dive in.

The plugin / library that I am talking about is a very popular one called Croppie which you can find here https://foliotek.github.io/Croppie/

Now, because I am building Inferno with VueJs, I wanted to make a component which is not dependent on jQuery and Croppie does allow us to do that. Every place where I wanted to get some DOM element, I used vanilla Javascript and even the events triggered with Croppie and the handling is something I was able to manage without using any jQuery and now here I am with a simple component which I can quickly pack and use with any other project to give the user the option to crop and upload an image.