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:

npm install vue-avatar-gradient
# or
yarn add vue-avatar-gradient

Import Component

import { 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:

<Avatar token="TOKEN"/>

Adjust Roundness

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

Custom Size

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

Add Initials

Add the text parameter:

<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:
```
npm run build
```

Contributing

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

License

MIT