Minimalist Profile Picture Component For Vue 3 – profile-avatar

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 
},

Preview:

Minimalist Profile Picture Component For Vue 3

Changelog:

v1.2.0 (07/25/2022)

  • Added custom size feature

Download Details:

Author: pau7rr

Live Demo: https://github.com/pau7rr/vue-profile-avatar

Download Link: https://github.com/pau7rr/vue-profile-avatar/archive/refs/heads/main.zip

Official Website: https://github.com/pau7rr/vue-profile-avatar

Install & Download:

# Yarn
$ yarn add vue-profile-avatar

# NPM
$ npm i vue-profile-avatar
Tags:

Add Comment