Vuetify User Initials Avatar

avatars.png

UserInitials.vue

<template>

<v-avatar v-if="user !== null"
         :size="size"
         :style="{'background-color': backgroundColor}">
  <strong class="initials"
          :style="{'color': fontColor,
                   'font-size': fontSize}">
    {{ (user.first_name[0] + user.last_name[0]) || '?' }}
  </strong>
</v-avatar>

</template>

<script>

// npm install randomcolor
import randomColor from 'randomcolor';

export default {
  name: 'user-initials',
  props: {
    'user': {
      type: null|Object,
      required: true,
    },
    'size': {
      type: Number,
      default: 40,
    },
    'color': {
      type: null|String,
      default: null,
    },
    'initialsOnly': {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    fontSize() {
      return this.size / 40.0 * 17 + 'px';
    },
    fontColor() {
      if (this.initialsOnly) {
        return this.color || this.userToColour(this.user);
      }
      return 'white';
    },
    backgroundColor() {
      if (this.initialsOnly) {
        return 'transparent';
      }
      return this.color || this.userToColour(this.user);
    },
  },
  methods: {
    stringToColour(str) {
      return randomColor({
        seed: str,
        luminosity: 'dark',
      });
    },
    userToColour(user) {
      return this.stringToColour(user.id +
                                 user.first_name +
                                 user.last_name +
                                 user.email);
    },
  },
}

</script>

<style scoped>

.initials {
  text-transform: uppercase;
}

</style>