How to Implement Name-Based Avatar Component in Vue

Sep 22 2022 | By Taha Shashtari

One common way to display avatars for users without an image is showing the first letter on a colored circle.

We need to consider the following when creating such a component:

The code

I named the component in this example Avatar.vue. So, here's how the usage code would be:

<!-- This will show the image version -->
<Avatar name="Test User" image="/image.png" />

<!-- This will show the first letter version -->
<Avatar name="Test User" />

In the code below, I'm using v-bind() in the css, which is a Vue 3 feature that allows us to bind variables to the css. If you are using Vue 2, make sure to use style binding instead. Like <div :style="{ backgroundColor: bgColor }></div>.

Here's the code for Avatar.vue:

  <div ref="containerRef" class="avatar">
    <img v-if="image" :src="image" class="image" :alt="name" />
    <span v-else-if="name" class="initials">
      {{ name[0] }}

<script setup>
import { ref, computed, onMounted } from 'vue'

const props = defineProps({
  image: {
    type: String,
    default: ''

  name: {
    type: String,
    default: ''

const containerRef = ref()
const fontSize = ref('1rem')

onMounted(() => {
  // The font size should be 50% of the container width
  fontSize.value = `${containerRef.value.clientWidth * 0.5}px`

const bgColor = computed(() => {
  // Don't show a color if the image is provided
  if (props.image) {
    return 'transparent'
  // Calculate the hue value based on the name
  const hue ='').reduce((acc, cur) => {
      return acc + cur.charCodeAt(0)
    }, 0) % 360
  return `hsla(${hue}, 60%, 50%, 1)`

<style scoped>
.avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* bind the background color to bgColor */
  background: v-bind(bgColor);

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;

.initials {
  /* bind the font-size to fontSize */
  font-size: v-bind(fontSize);
  color: white;
  font-family: sans-serif;
  user-select: none;

If you pass a specific name to this component, you will always get the same background color for it. It works like this because, in bgColor computed property, I'm calculating the color based on the sum of the char code of each letter in the name.

I'm using hsla for the color to be able to control the color value apart from the other components, which are saturation and lightness.

For this example, I set the font size to the half of the container's width. So if you want to make it smaller or bigger, just change 0.5 in fontSize.value = ${containerRef.value.clientWidth * 0.5}px.

Subscribe to get my latest posts