Add an Avatar in a Vue App

We can add an avatar easily into a Vue app with the vue-avatar package.

To use it, we install it by running:

npm i vue-avatar

Then we write:

<template>
  <div id="app">
    <avatar username="jane smith"></avatar>
  </div>
</template>

<script>
import Avatar from "vue-avatar";

export default {
  name: "App",
  components: {
    Avatar
  }
};
</script>

in our component.

We imported and register the component bundled with the package on the components property.

Then we use the avatar component from the package by setting the username prop to the string we want.

Then it’ll generate the initials automatically from the name and display it.

We can change the background color with the backgroundColor prop.

The src prop lets us display an image by setting the URL of it.

We can write:

<avatar src="http://placekitten.com/200/200"></avatar>

to display an image for the avatar.

The image will override text from username.

There are also other props to change sizes and add custom styles.

With the library, we can add avatars easily to a Vue app.