Vue Avvvatars

A vue3 port of avvvatars-react

Beautifully crafted unique avatar placeholder for your next react project Lightweight and customizable ❤️.

demo.mp4

Credits:

React Authors: Nusu Alabuga and Oguz Yagiz Kara

🙏 Special thanks to Monika Michalczyk for awesome shapes 🙏

Installation

With npm

npm install vue-avvvatars

Getting Started

Import Avvvatars to your app, then use it anywhere you want.

import { createApp } from 'vue'
import App from './App.vue'
import avvvatar from  'vue-avvvatars'

const app = createApp(App)
app.use(avvvatar)
app.mount('#app')

Customization

value: string

This is required for plugin to work, each value generates a random avatar to unique to this value, so each time plugin renders, you will get the same results.

<VueAvvvatar value="best_user@gmail.com" />

displayValue?: string

Override default text by providing displayValue

for example if you provide value=”[email protected]” the character output will be the first 2 letters of value which is “BE”, if you pass displayValue=”BU” you can override it to BU

<VueAvvvatar value="best_user@gmail.com" displayValue="BE" />

style?: character | shape (default character)

Use shape or character as avatar.

<VueAvvvatar value="best_user@gmail.com" style="character" />

size?: number (default 32)

Override default size (32px) by providing a number.

<VueAvvvatar value="best_user@gmail.com" size="32" />

shadow?: boolean (default false)

Enable shadow around the avatar.

<VueAvvvatar value="best_user@gmail.com" :shadow="false" />

radius?: number (default size)

Override the radius of the avatar, it takes size by default to always turn it to a circle

<VueAvvvatar value="best_user@gmail.com" radius="10" />

border?: boolean (default false)

Toggle border

<VueAvvvatar value="best_user@gmail.com" :border="false" />

borderSize?: number (default 2)

Override border width

<VueAvvvatar value="best_user@gmail.com" borderSize="2" />

borderColor?: string (default #fff)

Override border color

<VueAvvvatar value="best_user@gmail.com" borderColor="#fff" />

License

MIT