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.

Nice Online Avatar Editor / Preview Generator in Vue

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.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from https://squircley.app wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…