Empty
Placeholder for empty states.
Basic Usage
Display a simple empty state.
No Data
Custom Image
Set image URL via image prop.
Custom Image
Image Size
Set image width and height via image-size prop.
Custom Image Size
Custom Bottom Content
Add custom content at the bottom via default slot, such as action buttons.
No orders yet
Custom Image Slot
Use the #image slot to fully customize the image area.
Custom image slot
Custom Description
Use the #description slot to customize the description text area.
No results found, try modifying keywords
Use in Nuxt
The Empty component fully supports Nuxt 3/4 SSR rendering. The empty state image and description are correctly rendered on the server, ensuring a complete empty state prompt is presented on the first screen, enhancing user experience.
No Data
SSR Notes:
- ✅ Description text (description) and image (image) render correctly on first load
- ✅ Built-in SVG illustration fully output on the server
- ✅ Custom image size (image-size) takes effect on initial render
- 💡 Dynamic data loading and state switching logic is completed after client-side activation
Nuxt Auto Import
After installing the @yh-ui/nuxt module, the YhEmpty component is auto-registered, no manual import needed.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| image | Custom image URL | string | — |
| image-size | Image size in pixels | number | 100 |
| description | Description text | string | '暂无数据' |
| icon | Custom image component | string | Component | — |
| theme-overrides | Theme override variables | ComponentThemeVars | — |
Slots
| Slot Name | Description |
|---|---|
| default | Custom bottom content (e.g. action buttons) |
| image | Custom image area |
| description | Custom description text |
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-empty-padding | Container padding | 40px 0 |
--yh-empty-description-color | Description text color | var(--yh-text-color-secondary, #909399) |
--yh-empty-description-font-size | Description font size | 14px |
--yh-empty-ellipse-color | Default illustration ellipse color | #f5f5f7 |
--yh-empty-image-fill | Default illustration primary fill color | #aeb8c2 |
--yh-empty-image-fill2 | Default illustration secondary fill color | #f5f5f7 |
--yh-empty-plane-bg | Default illustration plane background | #f5f5f7 |
--yh-empty-comment-fill | Default illustration comment fill color | #dce0e6 |