Main
A main element that fills the available viewport height.
Usage
The Main component renders a <main> element that works together with the Header component to create a full-height layout that extends to the viewport's available height.
The Main component uses the
--ui-header-height CSS variable to position itself correctly below the Header.Examples
Within app.vue
Use the Main component in your app.vue or in a layout:
app.vue
<template>
<UApp>
<UHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter />
</UApp>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
Slots
| Slot | Type |
|---|---|
default |
|
Theme
app.config.ts
export default defineAppConfig({
ui: {
main: {
base: 'min-h-[calc(100vh-var(--ui-header-height))]'
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
main: {
base: 'min-h-[calc(100vh-var(--ui-header-height))]'
}
}
})
]
})
Changelog
5cb65 — feat: import @nuxt/ui-pro components