Container Layout
Container components used for layout, making it easy to quickly build the basic structure of a page. It is based on Flexbox and includes YhContainer, YhHeader, YhAside, YhMain, and YhFooter.
Common Page Layouts
Header + Main
Aside + Main
Full Layout
Classic admin layout with Header + Aside + Main + Footer. YhContainer automatically switches to a vertical layout when it detects YhHeader or YhFooter children.
Use in Nuxt
These layout components work in Nuxt 3/4 after registering @yh-ui/nuxt. A common pattern is to place them in layouts/default.vue and render route content through NuxtPage.
SSR Notes:
- All props and inline styles are rendered consistently during SSR.
- Automatic layout direction detection remains stable after hydration.
- Slot content and nested layouts stay aligned across server and client rendering.
SSR Safety
All container sub-components have passed SSR validation, so server-rendered and hydrated output stay consistent.
API
Props
Container
| Prop | Description | Type | Default |
|---|---|---|---|
| direction | Arrangement direction | 'horizontal' | 'vertical' | Auto-detect |
| theme-overrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Header
| Prop | Description | Type | Default |
|---|---|---|---|
| height | Header height | string | '60px' |
| theme-overrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Aside
| Prop | Description | Type | Default |
|---|---|---|---|
| width | Sidebar width | string | '200px' |
| theme-overrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Main
| Prop | Description | Type | Default |
|---|---|---|---|
| theme-overrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Footer
| Prop | Description | Type | Default |
|---|---|---|---|
| height | Footer height | string | '60px' |
| theme-overrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Events
YhContainer, YhHeader, YhAside, YhMain, and YhFooter do not expose component events.
Slots
Container
| Slot | Description | Parameters |
|---|---|---|
| default | Container content. | - |
Header
| Slot | Description | Parameters |
|---|---|---|
| default | Header content. | - |
Aside
| Slot | Description | Parameters |
|---|---|---|
| default | Aside content. | - |
Main
| Slot | Description | Parameters |
|---|---|---|
| default | Main content. | - |
Footer
| Slot | Description | Parameters |
|---|---|---|
| default | Footer content. | - |
Expose
These layout components do not expose public instance methods or properties.
Theme Variables
| Variable Name | Description | Default |
|---|---|---|
--yh-header-padding | Header padding | 0 20px |
--yh-header-bg-color | Header background color | transparent |
--yh-header-border-bottom | Header bottom border | none |
--yh-aside-bg-color | Sidebar background color | transparent |
--yh-aside-border-right | Sidebar right border | none |
--yh-main-padding | Main area padding | 20px |
--yh-main-bg-color | Main area background color | transparent |
--yh-footer-padding | Footer padding | 0 20px |
--yh-footer-bg-color | Footer background color | transparent |
--yh-footer-border-top | Footer top border | none |
Type Exports
| Name | Description |
|---|---|
YhContainerProps | Props type for YhContainer |
YhHeaderProps | Props type for YhHeader |
YhAsideProps | Props type for YhAside |
YhMainProps | Props type for YhMain |
YhFooterProps | Props type for YhFooter |
YhContainerSlots | Slots type for YhContainer |
YhHeaderSlots | Slots type for YhHeader |
YhAsideSlots | Slots type for YhAside |
YhMainSlots | Slots type for YhMain |
YhFooterSlots | Slots type for YhFooter |
YhContainerInstance | Public instance type for YhContainer |
YhHeaderInstance | Public instance type for YhHeader |
YhAsideInstance | Public instance type for YhAside |
YhMainInstance | Public instance type for YhMain |
YhFooterInstance | Public instance type for YhFooter |