There are plenty of libraries to help you create random avatars for profile / user names. However most of them require installation, some configuration and sometimes even network requests. If you want to create a custom avatar without having to do any of that, just follow along. At the end of the tutorial you’ll have a gravatar generator which would show the initials of a passed name with a random background colour.

You can also jump to the source code at the end of the article if you wish to.

This is the folder structure we’re going to follow:

First, inside your Vue.js project, create a global component as follows. I like to keep my shared (common) components in a separate folder for easy access. Here, you can call this file Avatar.vue.

<template>
  <div v-bind:style="{ backgroundColor: getRandomColor() }" class="avatar-icon">
    <span class="white--text">{{ getInitials(initials) }}</span>
  </div>
</template>

<script lang="ts">
import { avatarColors } from "../../src/uiconstants";

export default {
  name: "Avatar",
  props: ["initials"],
  data: function () {
    return {
      colors: avatarColors,
    };
  },
  methods: {
    getInitials(data) {
      if (data != null) {
        let chr;
        const d = data.toUpperCase();
        chr = d.split(" ");
        if (chr.length >= 2) {
          return chr[0][0] + chr[1][0];
        } else {
          return d[0] + d[1];
        }
      }
      return "";
    },
    getRandomColor() {
      let randomIndex = Math.floor(Math.random() * this.colors.length);
      return this.colors[randomIndex];
    },
  },
};
</script>

<style scoped>
.avatar-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 2.4;
  color: #ffffff;
  font-weight: bold;
  border-radius: 50%;
}
</style>
Code language: HTML, XML (xml)

I’ve used a local method called getRandomColor() on line number 3. It basically returns a random hex color code from a list of hex color codes I’ve defined inside uiconstants.js. I have also used a CSS class “avatar-icon” to style the look, which I’ve defined on line 43.
Then on line 3, I’ve used a method named getInitials() to get the initials of the passed names. I’ve defined them on line 19.
I’ve imported the avatar colors from an external file on line 8. Here’s the file content (uiconstants.js):

export const avatarColors = [
  "#F44336",
  "#E91E63",
  "#9C27B0",
  "#673AB7",
  "#3F51B5",
  "#2196F3",
  "#03A9F4",
  "#00BCD4",
  "#009688",
  "#4CAF50",
  "#8BC34A",
  "#FF9800",
  "#FF5722"
];
Code language: JavaScript (javascript)

As you can see, I’ve only used a varialble named avatarColors and stored some random hex color codes in it. You can modify it as per your need, or even add some more colors. The more color codes you have, the higher will be the randomness of the avatar background color.

Now that the avatar generator component is ready, you can move on to the main component. In the main component, you’re going to import the avatar component as many times as you have items in your list. Here’s the main component (MainComponent.vue):

<template>
  <div>
    <h2>Named Avatars</h2>
    <div v-for="(name, index) in names" :key="index" class="list-style">
      <Avatar v-bind:initials="name.firstName + name.lastName" />
      {{ name.firstName }} {{ name.lastName }}
    </div>
  </div>
</template>
 
<script>
import Avatar from "./Avatar";

export default {
  name: "MainComponent",
  components: {
    Avatar,
  },
  data() {
    return {
      names: [
        {
          id: 1,
          firstName: "Gautam",
          lastName: "Kabiraj",
        },
        {
          id: 2,
          firstName: "Emma",
          lastName: "Parker",
        },
        {
          id: 3,
          firstName: "Jane",
          lastName: "Oliver",
        },
        {
          id: 4,
          firstName: "Kane",
          lastName: "Lee",
        },
        {
          id: 5,
          firstName: "Jim",
          lastName: "Ko",
        },
        {
          id: 6,
          firstName: "Tina",
          lastName: null,
        },
      ],
    };
  },
};
</script>

<style scoped>
.list-style {
  border: 1px solid rgb(201, 235, 255);
  background: rgb(239, 248, 255);
  padding: 10px 8px;
  margin: 10px 0;
  text-align: left;
}
</style>
Code language: HTML, XML (xml)

In the above component, I’ve passed the names to the avatar component (which we just created) on line number 5. I’ve got a list of pre-defined names on line number 21 inside the local data component. You can, of course, have your data fetched from an API call or elsewhere as you need.

If you followed the steps correctly, you should now see a list with random avatar colours like this:

The finished code is available at:

Codesandbox | Github