glorpies

vue

A <Glorpie> component for Vue 3 and Nuxt.

❯npm i glorpies

use it

UserBadge.vue
<script setup>import { Glorpie } from 'glorpies/vue'; defineProps(['user']);</script> <template>  <Glorpie :name="user.email" :size="40" :label="user.name" /></template>
ada@lovelace.dev
agent-47
grace@hopper.dev

Takes every option as a prop. background="false" and :background="false" both work, and background="#ffe9a8" sets a colour.

nuxt

No configuration. On the server the component renders a placeholder in the face's background colour, at its final size; it paints after hydration.

pages/team.vue
<script setup>import { Glorpie } from 'glorpies/vue'; const { data: team } = await useFetch('/api/team');</script> <template>  <Glorpie v-for="person in team" :key="person.id" :name="person.email" :size="32" /></template>

errors

If a face fails to paint, the component emits error. Without a listener, the error goes to console.error.

vue
<Glorpie :name="user.id" @error="report" />