Vue Avatar Gradient

Generate beautiful gradient avatars for your Vue application.

A lightweight Vue 3 component that renders a customizable gradient avatar based on a token string. Ideal for user avatars, placeholders, or generated profile images.

Inspired by Vercel Avatar.

---

Features

• Deterministic Gradients: Generates the same gradient for a given token.
• Customizable Size & Shape: Adjust size and rounded props.
• Optional Text: Display initials or labels inside the avatar.
• Easy Integration: Supports plugin installation or direct component import.

---

Installation

Install the package and its peer dependency:

1npm install vue-avatar-gradient
2# or
3yarn add vue-avatar-gradient

---

Import Component

1import { Avatar } from 'vue-avatar-gradient'

Usage

Provide a username to generate an avatar. Each name will generate a unique avatar. Just replace TOKEN with an username or email:

1<Avatar token="TOKEN"/>

Adjust Roundness

1<Avatar token="TOKEN" :round="60"/>

Custom Size

1<Avatar token="TOKEN" :size="30"/>

Add Initials

Add the text parameter:

1<Avatar token="TOKEN" text="EU"/>

---

Props

Prop	Type	Default	Description
token	String	—	Required. Unique string to generate hash
size	Number	50	Width and height of the SVG avatar (px)
rounded	Number	0	Corner radius for rounded avatars (px)
text	String	''	Optional text (e.g., initials) inside avatar

---

Development & Build

• Build: Uses Vite to produce ESM and UMD bundles:

  1npm run build

---

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check issues.

---

License

MIT