vue-avatar-gradient

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 tinycolor2
# or
yarn add vue-avatar-gradient tinycolor2

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 Vue CLI to produce ESM and UMD bundles:

  npm run build
  

• Linting: ESLint configured for .js and .vue files:

  npm run lint
  

Contributing

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

License

MIT