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

<script setup lang="ts">
import { VACropper } from 'vue-cup-avatar'
import 'vue-cup-avatar/dist/style.css'

const yourUploadFunction = (data: Blob) => {
 console.log(data)
}

</script>

<template>
 <VACropper avatar="./logo.svg" @cropped="yourUploadFunction" />
</template>

Props

 {
 // avatar image to show as avatar before user crop/upload
 avatar: {
  default: '',
  type: String,
 },
 // size in rem of that avatar
 avatarSize: {
  default: 6,
  type: Number,
 },
 // avatar margin
 avatarMarginBottom: {
  default: 0.8,
  type: Number,
 },
  // avatar margin
 avatarMarginTop: {
  default: 0.8,
  type: Number,
 },
// Don't show the avatar ( just the form)
 noAvatar: {
  default: false,
  type: Boolean,
 },
  // show or not upload from url, default false, will only show upload from file
 showLoadFromUrl: {
  default: false,
  type: Boolean,
 },
}

Events

 cropped: (data: Blob) => unknown

Screenshots