vue-avatar-3

A useful avatar component for Vue 3, with support for letter avatars.
7,661 1
vue vue-component avatar
Install
npm install vue-avatar-3
Latest Version:1.0.0
Vue:3
Older releases:2
License:MIT
Last Updated:Aug 3, 2026
Links: GitHub  ·  npm
Maintainer: g1eny0ung

vue-avatar-3

CI npm

A useful avatar component for Vue 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:

  1. If src is set, then src will have the highest priority.
  2. 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 (use a 3- or 6-digit hex color so the text color can be determined automatically).
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.

Credits

This project is inspired by the following projects:

License

Released under the MIT License.

Related Packages

@amaury-tobias/v-avatar

Componente de avatar basado en Vue.js

16,378 1
avatar vue vue-component user
vue-json-tree-view

a JSON Tree View Component in Vue.js

380,792 473
vue-component vuejs
@v-c/picker

picker ui component for vue

57,185 32
vue-component picker
vue-frame-crm

vue components for crm system

15,005
vue vue-component
kokk

A beautiful way to create a documentation from markdown, and insert a vue compon...

10,142 49
vue-component markdown

Version History

Version Released Vue License
1.0.0 ^3.0.0 MIT
0.3.1 ^3.0.0 || ^2.6.0 MIT
0.3.0 ^3.0.0 || ^2.6.0 MIT
0.2.4 ^3.0.0 || ^2.6.0 MIT
0.2.3 ^3.0.0 || ^2.6.0 MIT