Vue.js Crop, Upload and Display Profile Picture
Hello, welcome to my first blog ever about Vue.js. This blog will show how to create a simple avatar component. The goal of this practice is to show how to develop a simple component that can crop, upload and display profile pictures. Since I was a beginner in Vue.js I couldn’t find a proper resource about how to develop such a component. I assume you already have an API that can handle the profile picture we are going to upload. Let’s get to it!
TL;DR: Please check my GitHub repository :)
Step 1: Project Setup
vue create vue_avatar (I created Vue 2.x project)
yarn add vuetify axios vue-advanced-cropper
Finally, I created a component, Avatar.vue.
Step 2: Create Avatar Dialog
We will use vue-advanced-cropper for image selection and cropping. So we need to import the required libraries in script:
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css'
import axios from 'axios'You can check the GitHub repository
I have used this method in my side project:
Narl.ink is a shortcut link for all your links. Users can connect with their audience via single secure link. It also provides a bookmark for teams. Team members can share their links among them.
