Skip to content

AppShell

The VAppShell component is a Vue component that provides a layout shell for a web application. It includes slots for different sections of the layout, such as the header, footer, navbar, main content, and aside content.

Usage

Basic Usage

To use the VAppShell component, you can simply include it in your template like this:

Fluid

Use fluid prop to make container fluid.

Stacked

Here's an example of stacked layout.

Here's an example of sidebar layout with header.

Three Column

Here's an example of three column layout.

Props

NameTypeDefaultDescription
fluidbooleanfalseIf true, the main content area will have no padding and will take up the full width of the screen.
paddedContainerbooleanfalseIf true, the main content area's container will have padding.
paddedContentbooleanfalseIf true, the main content area's content wrapper will have padding.
mainClassstringundefinedA CSS class to apply to the main content area.
contentClassstringundefinedA CSS class to apply to the main content area's content wrapper.
containerClassstringundefinedA CSS class to apply to the main content area's container.

Slots

NameDescription
defaultThis slot is used to add content to the main section of the app shell.
headerThis slot is used to add content to the header section of the app shell.
asideThis slot is used to add content to the aside section of the app shell.
navigationThis slot is used to add content to the navigation section of the app shell.
container.afterThis slot is used to add content after the container section of the app shell
content.afterThis slot is used to add content after the content section of the app shell.
footerThis slot is used to add content to the footer section of the app shell.

Storybook

View Storybook documentation here.