Container Layout
Container components used for layout, making it easy to quickly build the basic structure of a page. Uses Flexbox layout and includes five sub-components: Container, Header, Aside, Main, and Footer.
Common Page Layouts
Header + Main
Aside + Main
Full Layout
Classic admin layout with Header + Aside + Main + Footer. The Container component automatically detects if children include Header or Footer and switches to a vertical layout if so.
Use in Nuxt
Container component fully supports Nuxt 3/4 SSR rendering. The following example demonstrates building an admin layout with a collapsible sidebar in Nuxt's layouts/default.vue, where the content area uses <NuxtPage /> to render the current route.
SSR Notes:
- ✅ All Props and styles fully supported
- ✅ Flex layout direction auto-detection works normally
- ✅ Slot content fully rendered
- ✅ Used in combination with
NuxtPagecontainer - ✅
NuxtLinkrouting links fully supported - ✅ Responsive sidebar collapse support
SSR Safety
All Container sub-components have passed complete SSR tests, ensuring that server-side and client-side rendering are completely consistent with no Hydration errors.
API
Container Props
| Prop | Description | Type | Default |
|---|---|---|---|
| direction | Arrangement direction | 'horizontal' | 'vertical' | Auto-detect (vertical when Header/Footer present) |
| themeOverrides | Theme overrides | ComponentThemeVars | — |
Header Props
| Prop | Description | Type | Default |
|---|---|---|---|
| height | Header height | string | '60px' |
| themeOverrides | Theme overrides | ComponentThemeVars | — |
Aside Props
| Prop | Description | Type | Default |
|---|---|---|---|
| width | Sidebar width | string | '200px' |
| themeOverrides | Theme overrides | ComponentThemeVars | — |
Main Props
| Prop | Description | Type | Default |
|---|---|---|---|
| themeOverrides | Theme overrides | ComponentThemeVars | — |
Footer Props
| Prop | Description | Type | Default |
|---|---|---|---|
| height | Footer height | string | '60px' |
| themeOverrides | Theme overrides | ComponentThemeVars | — |
Slots
All sub-components support the default slot.
Theme Variables
Container component supports customizing local styles by overriding the following CSS 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 |