Skip to main content
The Avatar.vue component is a reusable Vue.js component designed to display a circular avatar. It supports displaying an image if a src is provided or a text-based monogram if no image is available. The size of the avatar can be customized through props.

​
Features

Image or Monogram

Displays an image when the src prop is provided or a text monogram when it is not.

Custom Sizes

Supports three sizes: large (default), small, and xSmall.

Dynamic Content

Easily switch between image and monogram representations.

​
Usage

​
Basic Examples

​
Image Avatar

import { Avatar } from '@robojuice/velure-ui';

<Avatar monogram="KD" :src="'/vite.svg'" />

​
Monogram Avatar

<Avatar monogram="KD" />

​
Small Monogram Avatar

<Avatar monogram="KD" small />

​
Extra Small Monogram Avatar

<Avatar monogram="KD" xSmall />

​
Props

​
monogram
string
default:"''"
The text displayed when no image source is provided.
​
small
boolean
default:"false"
Sets the avatar size to small.
​
xSmall
boolean
default:"false"
Sets the avatar size to extra small.
​
src
string
default:"''"
The image source for the avatar. If not provided, displays the monogram.

​
Example Use Cases

​
Displaying a User’s Image

Use the Avatar component to display a user’s profile picture: 
<Avatar monogram="AB" :src="'/path/to/image.jpg'" />

​
Fallback to Monogram

If an image is not available, the monogram will be displayed: 
<Avatar monogram="AB" />

​
Small and Extra Small Sizes

Adjust the size of the avatar using the small and xSmall props: 
<Avatar monogram="CD" small />
<Avatar monogram="EF" xSmall />

​
Notes

  • Dynamic Size: The size is controlled by the small and xSmall props, with large being the default.
  • Image Fallback: If no src is provided, the component will render the monogram as a fallback.
  • Customizable: Combine this component with additional styling for unique use cases.
For further customization, refer to the component’s source code.