vue-facehash

Deterministic face avatars for Vue 3 and Nuxt. The same name always produces the same face.

Install

npm install vue-facehash

Use in Vue or Nuxt

Import components directly in a Vue component. Nuxt auto-imports Vue APIs, but package components still need an explicit import.

<script setup lang="ts">
import { Facehash } from 'vue-facehash'
</script>

<template>
  <Facehash
    name="Ada Lovelace"
    :size="64"
    :colors="['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51']"
  />
</template>

To register every component globally:

import { createApp } from 'vue'
import VueFacehash from 'vue-facehash'
import App from './App.vue'

createApp(App).use(VueFacehash).mount('#app')

Facehash props

| Prop | Type | Default | | --- | --- | --- | | name | string | required | | size | number \| string | 40 | | variant | 'gradient' \| 'solid' | 'gradient' | | intensity3d | 'none' \| 'subtle' \| 'medium' \| 'dramatic' | 'dramatic' | | interactive | boolean | true | | showInitial | boolean | true | | randomMouth | boolean \| 1 \| 2 \| 3 | false | | colors | string[] | — | | colorClasses | string[] | — | | gradientOverlayClass | string | — | | enableBlink | boolean | false |

The package also exports FacehashAvatar, FacehashAvatarImage, FacehashAvatarFallback, useFacehashAvatar, and stringHash.

<script setup lang="ts">
import {
  FacehashAvatar,
  FacehashAvatarFallback,
  FacehashAvatarImage,
} from 'vue-facehash'
</script>

<template>
  <FacehashAvatar style="width: 64px; height: 64px">
    <FacehashAvatarImage src="/profile.jpg" alt="Ada Lovelace" />
    <FacehashAvatarFallback
      name="Ada Lovelace"
      :facehash-props="{ colors: ['#264653', '#2a9d8f'] }"
    />
  </FacehashAvatar>
</template>

License

MIT