主组件与 Header 组件协同工作，以创建延伸至视口可用高度的全高布局。
app.vue 中在你的 app.vue 或布局中使用主组件
<template>
<UApp>
<UHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter />
</UApp>
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
| 插槽 | 类型 |
|---|---|
default | {} |
export default defineAppConfig({
ui: {
main: {
base: 'min-h-[calc(100vh-var(--ui-header-height))]'
}
}
})
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))]'
}
}
})
]
})