A Text Avatar Component For Vue.js


vue-avatar is an avatar component of vue.js. This component displays an avatar and if none is provided it backs up to the username’s initials. This component is heavily inspired by the user-interaction avatar.

material ui avatar with text, react user avatar example, material ui avatar example, vue avatar component, material ui avatar image size

Rules used to calculate the initials of a username:

  • Divide the username with a space and a hyphen
  • Use the first letter of each part
  • Never use more than three characters as initials
  • If the username is divided into more than three parts and one part of it begins with an uppercase letter, skip the parts that begin with a lowercase letter.

How to make use of it:

Install & Download:

npm install vue-avatar


import Avatar from 'vue-avatar'

export default {
  components: {

After that, you can use it in your templates:

<avatar username="Jane Doe"></avatar>
var Vue = require('vue')
var Avatar = require('vue-avatar')

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


usernameNStringThe user name that will be used to compute user initial.
initialsNStringForce the displayed initials by overriding the computed ones.
inlineNfalseBooleanUses inline-flex instead of flex
srcNStringPath to the avatar image to display.
:customStyleNObjectA custom style object to override the base styles.
backgroundColorNStringThe 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.
colorNStringThe font color used to render the user initials. If none is provided, the background color is used to compute the font color.
:lightenN80NumberA factor by which the background color must be lightened to produce the font color. Number between [-100,100].
:sizeN50NumberThe avatar size in pixel.
:roundedNtrueBooleanTrue if the avatar must be rounded.
:parserN[getInitials()](https://github.com/eliep/vue-avatar/blob/master/src/Avatar.vue#L8-L27)FunctionCustom parser to manipulate the string (the parser takes 2 params: a String and the default parser). It must return a String.


@avatar-initialsusername (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.

Text Avatar Component, vue-avatar Plugin/Github

See Demo And Download

Official Website(eliep): Click Here

This superior jQuery/javascript plugin is developed by eliep. For extra Advanced Usages, please go to the official website.