Main
A <main> component to fill the screen.
Usage
The Main component will instantiate a <main> tag and set the min-height to fill the screen based on the --header-height variable, the footer will be pushed out of the screen.
app.vue
<template>
<UHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter />
</template>
Slots
default
{}
Props
ui
DeepPartial<{ wrapper: string; }>
{}Config
{
wrapper: 'min-h-[calc(100vh-var(--header-height))]'
}