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

Default Background Color Palette

Build Setup

# install dependencies
npm install

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

# build 
npm run build:bundle