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