Vue

A computed data URI in a single-file component. It renders the same on the server, so it works in Nuxt as it is.

An avatar component

<script setup lang="ts">
import { computed } from 'vue';
import { botlingDataUri } from 'seedkin/botling';

const props = withDefaults(defineProps<{ id: string; size?: number }>(), { size: 40 });
const src = computed(() => botlingDataUri(props.id, { size: props.size, title: null }));
</script>

<template>
  <img :src="src" alt="" :width="size" :height="size" />
</template>

Use it as <Avatar :id="user.id" />. title: null leaves the accessible name to the <img>: keep alt="" when the person's name is next to it, and describe it otherwise.

Inline SVG

<span v-html="botling(id, { size: 40, title: null })" />

v-html is safe here: the seed never appears in the markup, and a title you pass is escaped. For animated avatars under a strict Content Security Policy, use the <img> (see Animation).