Say Goodbye to Empty Profile Pictures: Build a Custom Avatar Component with Vue 3 & TypeScript

This component allows developers to generate picture placeholders using user initials in a variety of applications. In this article, I’ll walk you through how I developed this component, the key features, and how you can integrate it into your own projects.

The Motivation Behind the Component

Building modern web applications often involves dealing with user profiles. But not all users upload profile pictures. To prevent the dreaded “empty profile icon” and give your application a polished look, generating avatars from user initials is an elegant solution. The concept is simple: if no image is available, display an avatar created using the user’s initials.

Inspired by the Microsoft Teams avatar system, I decided to build this component for the Vue 3 ecosystem, combining it with the power and type safety of TypeScript.

Key Features of the Avatar Component

Here’s a quick overview of the main features of this Vue 3 avatar component:

• Initials-Based Avatars: Automatically generates avatars based on the user’s name initials.
• Customizable: Adjust the background color, font size, and styles to fit your application’s design.
• Fallback Mechanism: When a user doesn’t have a profile image uploaded, the component falls back to generating an avatar.
• TypeScript Support: Built with TypeScript for type safety and easier debugging.
• Lightweight and Easy to Use: Simple integration into any Vue 3 project, making it perfect for dashboards, social apps, and admin panels.

Project Overview

You can find the full project on npm, GitHub, and Storybook for documentation and live previews:

• npm Package: avatar-vue3
• GitHub Repository: GitHub Repo
• Storybook Demo: Storybook Documentation

By utilizing these resources, you can install the component, explore the codebase, and see examples of how it works.

How to Install and Use

Let’s walk through the steps of installing and using the component in your Vue 3 project.

1. Installation

You can easily add the avatar component to your project by installing it via npm:

npm install avatar-vue3

2. Basic Usage

Once installed, import the component in your Vue file and use it like this:

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


<script setup lang="ts">
  import Avatar from './components/Avatar.vue'
  import { Avatar } from 'avatar-vue3';
  const username = ref('John Doe')
</script>

In this example, the component generates an avatar based on the initials of the user name, “John Doe,” which results in the initials “JD” being displayed.

3. Customization Options

You can customize the avatar’s appearance using props for colors, sizes, and more:

<Avatar
  :name="username"
  :size="50"
  :backgroundColor="'#4A90E2'"
  :fontSize="24"
/>

In this example, the avatar is styled with a custom background color and font size to suit the application’s design.

Behind the Scenes: TypeScript and Vue 3 Integration

One of the key challenges was ensuring that the component was robust and type-safe. Using TypeScript was essential for this project. It allowed me to define strong types for props, ensuring that developers could catch potential errors early and have a clear API while working with the component.

This ensured that even when the component is used in large-scale applications, it would be easy to maintain and scale without breaking existing functionality.

The Power of Open Source

By making this component open source, I’m hoping to give back to the developer community and encourage contributions to make it even better. You can easily clone the GitHub repo, contribute, or even raise issues or suggestions.

If you want to take a closer look or contribute to the project, head over to the GitHub repository to dive into the code.

Conclusion

This avatar component is an efficient, customizable solution for Vue 3 projects that require user avatars but may not always have profile images uploaded. Whether you’re building a social media app, an admin dashboard, or just want a way to represent users with elegant placeholders, this component has you covered.

I’m excited to see how the community uses it, and I’d love to hear your thoughts! Feel free to check out the npm package, GitHub repo, and the Storybook documentation for more details.

Thanks for reading, and happy coding! 🙌

In this example, the avatar is styled with a custom background color and font size to suit the application’s design.