skills.rest
wepn13232
wepn13232COMMUNITY
Explore all skills by this author →
GitHub

element-plus-avatar

Document Element Plus Avatar API props, events, slots, and AvatarGroup options for Vue developers.

7|Updated Mar 31, 2026
Search Tags:#vue#component-api#avatar#element-plus#ui-reference#el-avatar#avatar-group
One-click install
npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-avatar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: element-plus-avatar
Source: https://github.com/wepn13232/element-plus-skills/tree/main/avatar
Command: npx skills add https://github.com/wepn13232/element-plus-skills --skill element-plus-avatar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Front-end engineers often juggle design discussions and need quick access to Element Plus Avatar (el-avatar) API details without digging through the full docs, and this entry compiles the attributes, events, slots, and AvatarGroup options into a single response so questions are answered without losing momentum.

Core Features & Use Cases

  • Avatar Attributes & Sizing: Covers icon, size, shape, src, src-set, alt, and fit options so developers can pick the right combination for avatars in user profiles or badges.
  • Events & Slots: Documents the error event and default slot customization so teams can handle broken images gracefully and insert custom content inside the avatar.
  • AvatarGroup Controls: Lists collapse behavior, tooltip appearance, placement, and style hooks for stacked avatars in collaboration panels or user lists, with a direct reference to the official Element Plus guide.

Quick Start

Ask element-plus-avatar for the Avatar attributes, events, and slots you need to build a custom el-avatar display.

Frequently Asked Questions about element-plus-avatar

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I customize the size and shape of an el-avatar in Vue?▼

The el-avatar component accepts the size attribute for dimensions and the shape attribute for circle or square variations, allowing precise control over avatar displays in user profiles.

How does the el-avatar component handle broken image errors?▼

The el-avatar component handles broken images by emitting an error event, allowing developers to trigger fallback logic and substitute custom content using the default slot.

What attributes are available for AvatarGroup stacked avatars in Element Plus?▼

AvatarGroup attributes in Element Plus include options for collapse behavior, tooltip appearance, placement, and style hooks, enabling customized stacked avatar layouts in collaboration panels.

Can I use a custom icon or text instead of an image inside el-avatar?▼

Yes, you can use a custom icon or text inside el-avatar by leveraging the default slot, which supports inserting custom content when no image source is provided.

What fit options does el-avatar support for responsive images?▼

The el-avatar component supports the fit attribute to control how images are resized within the container, compatible with standard CSS object-fit values for responsive layouts.

Related Skills

Explore More Software Engineering Skills→
wepn13232wepn13232
7

element-plus-result

Document Element Plus Result component attributes, slots, and reference details.

Community
Basic
jiaiyanjiaiyan
21

el-avatar

Render user avatars with images, icons, or initials in Element Plus.

Community
Intermediate
wepn13232wepn13232
7

element-plus-badge

Document Element Plus Badge component attributes and slots for Vue UI projects.

Community
Basic
partme-aipartme-ai
610

ant-design-vue

Guide Ant Design Vue component usage for Vue 3 projects.

Official
Intermediate