vue-avatar

An avatar component for vue.js

Description

This component display an avatar image and if none is provided fallback to the user initials. This component is 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.

Installation

npm install vue-avatar

Versions

Vue.js	vue-avatar
^1.0.18	^1.3.0
^2.0.0	^2.0.0

Usage

vue-avatar is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, Avatar will be registered as a global variable.

ES6


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

export default {

  components: {
    Avatar
  },

}

After that, you can use it in your templates:

<avatar username="Jane Doe"></avatar>

which will render to:

CommonJS


var Vue = require('vue')
var Avatar = require('vue-avatar')

var YourComponent = Vue.extend({
  components: {
    'avatar': Avatar.Avatar
  }
})

Browser


<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-avatar/dist/vue-avatar.min.js"></script>

new Vue({
  components: {
    'avatar': Avatar.Avatar
  }
})

Props

Name	Required	Default	Type	Description
username	Y	-	String	The user name that will be used to compute user initial.
initials	N	-	String	Force the displayed initials by overriding the computed ones.
src	N	-	String	Path to the avatar image to display.
backgroundColor	N	-	String	The avatar background color to use if no image is provided. If none is specified, a background color will be picked depending on the user name length.
color	N	-	String	The font color used to render the user initials. If none is provided, the background color is used to compute the font color.
:lighten	N	80	Number	A factor by which the background color must be lightened to produce the font color. Number between [-100,100].
:size	N	50	Number	The avatar size in pixel.
:rounded	N	true	Boolean	True for a rounded avatar.

Event

Name	Arguments	Description
@avatar-initials	username (the value of the username props), initials (the value of the computed initials or the initials props if any)	This event is trigger when the component is ready with component username and initial.

Examples

	Code
	`<avatar username="Hubert-Félix Thiéfaine"></avatar>`
	`<avatar username="Hubert-Félix Thiéfaine" background-color="#FFC107" :size="100" :rounded="false" :lighten="20"></avatar>`
	`<avatar username="Hubert-Félix Thiéfaine" background-color="#FFC107" :size="100" :rounded="false" color="#fff"></avatar>`
	`<avatar username="Darth Vader" background-color="#000" :size="100" :rounded="false"></avatar>`
	`<avatar username="Darth Vader" src="./static/darth-vader.png" :size="100"></avatar>`
	`<avatar username="Darth Vader" initials="AS" :size="100"></avatar>`

Default color

18 default background colors are available and can be seen below. The background color chosen depends on the username length. This way a username will always have the same background color.