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
{}
{}

Config

{
  wrapper: 'min-h-[calc(100vh-var(--header-height))]'
}