Vue.js Component To Generate Initials or Image-based Avatars

vue-avatar-component provides a simple way to create round and colorful Avatar stickers for use in your applications.

If you just provide a name to the component, I will display a colored correction that shows the first letters of the presented name. Its color depends and is unique to each specific name.

If you submit the URL for the image, this image, its size, and a piece will be displayed to fit the deputy component.

How to make use of it:


npm install --save-dev vue-avatar-component


    <avatar fullname="My Sticker" :size="96"></avatar>

  import Avatar from 'vue-avatar-component'
  export default {
    components: { Avatar }


fullname : the full name from which the initials and the color will be computed. Initials are extracted by taking the first letter of each word, separated by a space or a hyphen. If there is more, only the 3 first initials are kept. For example, Foo Bar gives FBMy Foo-Bar gives MFBFOO gives F and My Fantastic Vue Component gives MFV. If not provided, the full name defaults to ‘##’.

size : the size of the sticker to generate, in pixels. If not provided, the size defaults to 48 pixels. The font size inside the avatar is computed from its overall size (half if 1 or 2 letters, third for 3 letters).

image : the url of the image to fit in the avatar sticker. If provided not empty, initials will not show and the image wil be shown. Be careful that if the provided image url is wrong, the component has its size but shows nothing.

radius : percentage of the overall size to show the rounded corners of the avatar. Provide a number between 0 and 50: at 0%, the avatar will be a square, at 50% it will be exactly circular. This percentage defaults to 50 if not provided.

color : If provided, overrides the computed color for the initials-based avatar. Just provide a CSS color (named, hex or rgba fits).

create rounded and colored avatars in vue js, vue-avatar-component Plugin/Github

See Demo And Download

Official Website(vertcitron): Click Here

This superior jQuery/javascript plugin is developed by vertcitron. For extra advanced usage, please go to the official website.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *