Use Suils in Vue

A Suils avatar is just an image URL. Wrap it in a single‑file component:

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

const props = withDefaults(
  defineProps<{ seed: string; styleName?: string; size?: number }>(),
  { styleName: 'suils', size: 96 },
);

const url = computed(
  () =>
    `https://avatars.suils.es/${props.styleName}/svg?seed=${encodeURIComponent(props.seed)}`,
);
</script>

<template>
  <img
    :src="url"
    :width="size"
    :height="size"
    :alt="`${seed}'s avatar`"
    style="border-radius: 50%"
  />
</template>

<Avatar :seed="user.id" style-name="unicorn" />

https://avatars.suils.es/unicorn/svg?seed=user-8f3a2c

Because the avatar is deterministic, the same seed always renders the same image, so it's safe to cache. For raster output request png with a size.