VUE-CUP-AVATAR

A vue-cup-avatar component, stands for Vue crop - upload avatar.

It's a Vue component for crop and, forwards the final blob when the user finishes the crop to your function. Based on the website repo seems nice: https://github.com/innocenzi/avatar If you use tailwind/windicss it has support for dark mode. (AKA class="dark") Also, it exposes some ID's if you want to override some styles. (vue-cup-avatar(whole component), va-from (upload from), va-toolbar (crop toolbar with buttons/commands))

The component will open the cropper in full page mode modal.

Simple use (demo in example folder )

yarn add vue-cup-avatar

1<script setup lang="ts">
2import { VACropper } from 'vue-cup-avatar'
3import 'vue-cup-avatar/dist/style.css'
4
5const yourUploadFunction = (data: Blob) => {
6 console.log(data)
7}
8
9</script>
10
11<template>
12 <VACropper avatar="./logo.svg" @cropped="yourUploadFunction" />
13</template>

Props

1 {
2 // avatar image to show as avatar before user crop/upload
3 avatar: {
4  default: '',
5  type: String,
6 },
7 // size in rem of that avatar
8 avatarSize: {
9  default: 6,
10  type: Number,
11 },
12 // avatar margin
13 avatarMarginBottom: {
14  default: 0.8,
15  type: Number,
16 },
17  // avatar margin
18 avatarMarginTop: {
19  default: 0.8,
20  type: Number,
21 },
22// Don't show the avatar ( just the form)
23 noAvatar: {
24  default: false,
25  type: Boolean,
26 },
27  // show or not upload from url, default false, will only show upload from file
28 showLoadFromUrl: {
29  default: false,
30  type: Boolean,
31 },
32}

Events

1 cropped: (data: Blob) => unknown

Screenshots