entorno de desarrollo listo

nuxt4-app/app/components/UserMenu.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const { user, loading, fetchUser, logout } = useAuth()
+
+// Cargar usuario al montar
+onMounted(() => {
+  fetchUser()
+})
+
+const items = computed(() => [
+  [{
+    label: user.value?.email || 'Usuario',
+    slot: 'account',
+    disabled: true
+  }],
+  [{
+    label: 'Cerrar sesión',
+    icon: 'i-heroicons-arrow-right-on-rectangle',
+    click: logout
+  }]
+])
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="user?.authenticated && !loading"
+    :items="items"
+    :ui="{ item: { disabled: 'cursor-text select-text' } }"
+    :popper="{ placement: 'bottom-start' }"
+  >
+    <UAvatar
+      :alt="user.name || user.username || 'User'"
+      size="sm"
+    />
+
+    <template #account="{ item }">
+      <div class="text-left">
+        <p class="font-medium text-gray-900 dark:text-white">
+          {{ user.name || user.username }}
+        </p>
+        <p class="text-sm text-gray-500 dark:text-gray-400 truncate">
+          {{ item.label }}
+        </p>
+      </div>
+    </template>
+  </UDropdownMenu>
+
+  <USkeleton v-else-if="loading" class="h-8 w-8" :ui="{ rounded: 'rounded-full' }" />
+</template>