Gravatar

Renders a Gravatar avatar from an email address.

npm install @vuecs/gravatar

Basic usage

Vue

<script setup lang="ts">
import { VCGravatar } from '@vuecs/gravatar';
</script>

<template>
    <VCGravatar email="user@example.com" :size="48" />
</template>

CSS

@import "tailwindcss";
@import "@vuecs/design";

@custom-variant dark (&:where(.dark, .dark *));

Props (selection)

Prop	Type	Default	Description
email	string	''	Email address (hashed client-side via MD5)
hash	string	''	Pre-computed MD5 hash — bypasses email if set
size	number	80	Image size in pixels (square)
defaultImg	string	—	Default fallback (mp, identicon, monsterid, wavatar, retro, robohash, blank)
alt	string	(via attrs)	Alt text — pass through alt HTML attribute