This package has been deprecated

Author message:

v-avatar has migrated to its new home at @j0nz/v-avatar. Please update your packages accordingly


0.1.1 • Public • Published


Easy plug and play user avatars. Current providers include RoboHash, Adorable, UI Avatars, and Gravatar.

Project installation

yarn add v-avatar
// main.js
import VAvatar from 'v-avatar'
<!-- App.vue -->
<v-avatar mode='robohash'
    :robohashOptions='{sets: "set4", bgset: "bg2"}'


The identifier is what is used to create the unique* avatar deterministically (so the same user will always get the same avatar). With the exception of the gravatar mode, the order of precedince is: 1. name, 2. username, 3. email, 4. hash. so with that in mind, if you wanted the avatar to be generated from, lets say, the users email you must not supply a name or username prop. Gravatar works a little differently by trying the hash first, then hashing the email and trying that.

Prop Type Default Description
name String Sets the users name
username String Sets the users username
email String Sets the users email
hash String Sets the avatar hash


Common Options to all modes

Prop Type Default Description
mode String initials must be one of [ initials, robohash, adorable, gravatar ]
size Number 128 Size of the image to be loaded
alt String alt tag to be applied to the image. falls back to the used identifier

Mode specific configurations

Prop Type Default Description
uiAvatarOptions Object see below Options applied when mode is set to initials
    background: '0D8ABC',   // notice no '#'
    color: 'fff',           // notice no '#'
    'font-size': 0.5,       // default 0.5, available: 0.1 - 1
    length: 2,              // number of chars to be displayed
    rounded: true,          // rounded ot square image
    uppercase: true,        // casing of letters
Prop Type Default Description
robohashOptions Object see below Options applied when mode is set to robohash
    bgset: ['bg1', 'bg2', false],           // pick one.
    sets: ['set1', 'set2', 'set3', 'set4'], // pick one, or several
    set: false,         // set to 'any' to get all sets
    gravatar: null,     // 'yes' if using email, 'hashed' if using hash identifier (and want to get your gravatar)
Prop Type Default Description
gravatarOptions Object see below Options applied when mode is set to gravatar
    d: 'identicon', // default/fallback: pick one of [ mp, identicon, monsterid, wavatar, retro, robohash, blank ]
    f: null,        // force-default/fallback: set to 'y' if desired
    r: 'g',         // gravatar rating: g, pg, r, x

Package Sidebar


npm i v-avatar

Weekly Downloads






Unpacked Size

384 kB

Total Files


Last publish


  • reed-jones