Initial commit

app/components/Profile/Avatar.vue

@@ -0,0 +1,21 @@
+<template>
+  <UAvatar
+    v-bind="forwardedProps"
+    :src="src ?? undefined"
+    :alt="name ?? undefined"
+    :icon="icon"
+  />
+</template>
+
+<script setup lang="ts">
+import type { AvatarProps } from '@nuxt/ui'
+
+const forwardedProps = defineProps<Omit<AvatarProps, 'src' | 'alt' | 'icon'>>()
+
+const { name, src } = storeToRefs(useAvatar())
+
+// show initials if name is present, otherwise show icon
+const icon = computed(() => {
+  return !name.value ? 'i-lucide-user' : undefined
+})
+</script>