Layout Container
Composable layout components for building page structures. Combine VxContainer, VxHeader, VxFooter, VxAside, and VxMain to create any layout.
The container auto-detects direction: vertical when children include VxHeader or VxFooter, horizontal otherwise.
Header + Main
Header
Main
vue
<template>
<VxContainer>
<VxHeader>Header</VxHeader>
<VxMain>Main</VxMain>
</VxContainer>
</template>Header + Main + Footer
Header
Main
vue
<template>
<VxContainer>
<VxHeader>Header</VxHeader>
<VxMain>Main</VxMain>
<VxFooter>Footer</VxFooter>
</VxContainer>
</template>Aside + Main
Main
vue
<template>
<VxContainer>
<VxAside width="200px">Aside</VxAside>
<VxMain>Main</VxMain>
</VxContainer>
</template>Header + Aside + Main
Header
Main
vue
<template>
<VxContainer>
<VxHeader>Header</VxHeader>
<VxContainer>
<VxAside width="200px">Aside</VxAside>
<VxMain>Main</VxMain>
</VxContainer>
</VxContainer>
</template>Aside + Header + Main
Header
Main
vue
<template>
<VxContainer>
<VxAside width="200px">Aside</VxAside>
<VxContainer>
<VxHeader>Header</VxHeader>
<VxMain>Main</VxMain>
</VxContainer>
</VxContainer>
</template>Header + Aside + Main + Footer
Header
Main
vue
<template>
<VxContainer>
<VxHeader>Header</VxHeader>
<VxContainer>
<VxAside width="200px">Aside</VxAside>
<VxMain>Main</VxMain>
</VxContainer>
<VxFooter>Footer</VxFooter>
</VxContainer>
</template>Aside + Header + Main + Footer
Header
Main
vue
<template>
<VxContainer>
<VxAside width="200px">Aside</VxAside>
<VxContainer>
<VxHeader>Header</VxHeader>
<VxMain>Main</VxMain>
<VxFooter>Footer</VxFooter>
</VxContainer>
</VxContainer>
</template>Props
VxContainer
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | auto | Layout direction. Auto-detects vertical when children include Header or Footer |
VxHeader
| Prop | Type | Default | Description |
|---|---|---|---|
height | string | '60px' | Header height |
VxFooter
| Prop | Type | Default | Description |
|---|---|---|---|
height | string | '60px' | Footer height |
VxAside
| Prop | Type | Default | Description |
|---|---|---|---|
width | string | '200px' | Aside width |