An Avatar Component For Vue.js

An Avatar Component For Vue.js

An avatar component for vue.js.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.


An avatar component for vue.js.

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.

You can find a few examples and the documentation here


npm install vue-avatar


Vuejs version vue-avatar version
^1.0.18 ^1.3.0
^2.0.0 ^2.0.0


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.


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


<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': VueAvatar.Avatar


Name Required Default Type Description
username N - String The user name that will be used to compute user initial.
initials N - String Force the displayed initials by overriding the computed ones.
inline N false Boolean Uses inline-flex instead of flex
src N - String Path to the avatar image to display.
:customStyle N - Object A custom style object to override the base styles.
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 if the avatar must be rounded.
:parser N getInitials() Function Custom parser to manipulate the string (the parser takes 2 params: a String and the default parser). It must return a String.


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.

Build Setup

# install dependencies
npm install

# serve gh pages with hot reload at localhost:8080/gh-pages/index.html
npm run dev

# build
npm run bundle


npm test

Download Details:

Author: eliep


Source Code:

vuejs vue javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.