Vue.js avatar component vue-avatar

vue-avatar:

An avatar component for Vue.js. Use this component to display an avatar image, highly inspired from react-user-avatar.

Rules used to compute user initials:

  • divide the username on space and hyphen
  • use the first letter of each parts
  • never use more than three letters as initials
  • if the username is divided in more than three parts and has part starting with an uppercase, skip parts starting with a lowercase.

For example, vue-avatar becomes VA

Example

Installation

npm install vue-avatar

Usage

import Avatar from 'vue-avatar/dist/Avatar'

export default {
  components: {
    Avatar
  },
}

<avatar username="VueJS"
initials="VUE"
:size="100"
></avatar>

<avatar username="D"
:size="100"
:rounded="false"
class="default-avatar"
:lighten="20"></avatar>

If no image is provided it can fallback to the user initials, for more info visit the documentation.

You can find the repository on GitHub.