Vue-avatar-3 NPM

vue-avatar-3

A useful avatar component for Vue 2&3, with support for letter avatars. Inspired by react-avatar.

Live demo: https://stackblitz.com/edit/vue-avatar-3.

Installation

npm install vue-avatar-3

yarn

yarn add vue-avatar-3

pnpm

pnpm add vue-avatar-3

Usage

<script setup>
import { ref } from 'vue'
import Avatar from 'vue-avatar-3'

const src = ref('https://fakeimg.pl/300/')
const name = ref('Foo Bar')
</script>

<template>
  <Avatar :src="src" :name="name" />
</template>

The priority of displaying avatars is as follows:

If src is set, then src will have the highest priority.
If src is not set or the load fails, then the name will be used to generate a letter avatar (you can use fallback to control this behavior).

Options

Name	Type	Default	Description
`src`	`string`		The image source.
`alt`	`string`		The image alt.
`srcSet`	`string`		The image srcSet.
`sizes`	`string`		The image sizes.
`imgProps`	`object`		The image attributes that will be applied to the image. This option will override above options.
`name`	`string`		Specify a name to generate a letter avatar. This option will only take effect if the image is not loaded successfully and the `fallback` option is `true`.
`bgColor`	`string`		Specify a background color for the letter avatar (must be a 6-value hex color, this is to automatically determine the text color).
`size`	`string` / `number`	`40px`	The size of the avatar. You can use a number or a string with a unit.
`variant`	`circular` / `rounded` / `square`	`circular`	The variant of the avatar.
`round`	`string` / `number`	`8px`	The radius of the avatar. Take effect when `variant` is `rounded`. You can use a number or a string with a unit.
`fallback`	`boolean`	`true`	Whether to show the letter avatar when the image is not loaded successfully.