@vcraescu/vue-avatar

vue-avatar

User avatar component for VueJS 2.

This component will displayed an avatar for image or a letter avatar if no url image is provided or the image cannot be loaded. Avatar image is loaded in background.

Installation

npm install @vcraescu/vue-avatar

Usage

ES6

import VueAvatar from "@vcraescu/vue-avatar";

export default {
    ...
    components: {
        VueAvatar,
    },
    ...
}

After that you can use it in your templates:

<div style="width: 48px">
    <vue-avatar name="John Doe" url="https://i.pravatar.cc/300" block />
</div>

Props

Name	Required?	Default	Type	Description
name	Yes	-	String	The name used to compute letter avatar initials and background color is picked randomly based on this. Only first 2 initials will be displayed.
url	No	-	String	If the url cannot be loaded, letter avatar will be displayed instead.
rounded	No	false	Boolean	True if avatar must be displayed rounded.
fgColor	No	#ffffff	String	Color hex code for letter avatar text.
bgColor	No	-	String	Force to use this color for letter avatar background instead of random color.
bgColorPalette	No	-	Array	Letter avatar background color will be randomly choosen from this array.
block	No	false	Boolean	Scales to the size of the containers: width=100%, height=100%
width	No	100	Number	Set avatar width
height	No	100	Number	Set avatar height

Default Background Color Palette

#e53935	#d81b60	#d81b60	#c51162
#5e35b1	#3949ab	#1e88e5	#0288d1
#0097a7	#00bfa5	#d81b60	#00b8d4
#00bfa5	#00b8d4	#00796b	#2e7d32
#558b2f	#827717	#9e9d24	#f57f17
#ff6f00	#e65100	#6d4c41	#4e342e
#616161	#455a64	#263238	#ff80ab

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# build 
npm run build:bundle