Minimalist Profile Picture Component For Vue 3 - profile-avatar

Install & Download:

# Yarn
$ yarn add vue-profile-avatar
# NPM
$ npm i vue-profile-avatar

Description:

A minimal profile avatar component that supports both plain text and custom images.

How to use it:

1. Import and register the profile-avatar.

import ProfileAvatar from 'vue-profile-avatar'

export default {
  components: {
    ProfileAvatar
  },
}

2. Add the component to the template and define the username.

<ProfileAvatar username="Vue Script"></ProfileAvatar>

3. All possible props to customize the profile avatar.

username: { 
  type: String, 
  default: 'Username', 
  required: true 
},
size: { 
  type: String, 
  default: 's', // s, m, or l
  required: false 
},
border: { 
  type: Boolean, 
  default: true, 
  required: false 
},
bgColor: { 
  type: String, 
  required: false 
},
borderColor: { 
  type: String, 
  required: false 
},
textColor: { 
  type: String, 
  required: false 
},
colorType: { 
  type: String, 
  required: false, 
  default: 'normal' // normal, pastel, or brownie
},
image: { 
  type: String, 
  required: false 
},