nuxt-x-app
Avatar
Avatar components for user profile display with group and upload variants.
Avatar
User avatar components with support for images, initials fallback, grouped display, and file upload.
Components
<XAAvatar />
Displays a user avatar with image fallback to initials.
<XAAvatar :user="user" size="lg" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
user | { name: string; avatar?: string } | required | User data |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar size |
<XAAvatarGroup />
Displays multiple avatars in an overlapping group.
<XAAvatarGroup :users="team" :max="5" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
users | User[] | required | Array of users |
max | number | 5 | Max avatars before overflow count |
size | string | 'sm' | Avatar size |
<XAAvatarUpload />
Avatar with file upload capability.
<XAAvatarUpload v-model="avatarUrl" :user="user" @upload="handleUpload" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | '' | Current avatar URL |
user | User | required | User object |
uploadUrl | string | '/api/upload' | Upload endpoint |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | New avatar URL after upload |
upload | File | Fires before upload |
error | Error | Upload error |
AI Context
components: [XAAvatar, XAAvatarGroup, XAAvatarUpload]
package: "@xenterprises/nuxt-x-app"
use-when: Displaying user profile pictures in dashboards, lists, or comment sections
XAAvatar:
required-props: [user]
user-shape: { name: string, avatar?: string }
XAAvatarGroup:
required-props: [users]
use-when: Team member lists, shared document indicators
XAAvatarUpload:
use-when: Profile settings page, user profile editing
emits-model-value: true