tethys.backend/resources/js/Components/UserAvatarCurrentUser.vue

<script setup>
import { computed } from 'vue';
// import { usePage } from '@inertiajs/vue3'
import { usePage } from '@inertiajs/vue3';
import UserAvatar from '@/Components/UserAvatar.vue';

const userName = computed(() => usePage().props.auth?.user.name);
</script>

<template>
    <UserAvatar v-bind:username="'userName'" api="initials" />
</template>