页面主体
您页面的主要内容。
用法
PageBody 组件包裹您的主要内容，并添加一些内边距以实现一致的间距。
在 Page 组件的默认插槽中，在 PageHeader 组件之后使用它。
<template>
<UPage>
<UPageHeader />
<UPageBody />
</UPage>
</template>
示例
尽管这些示例使用Nuxt Content，但这些组件可以与任何内容管理系统集成。
在页面内
在页面中使用 PageBody 组件来显示页面的内容。
pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()
definePageMeta({
layout: 'docs'
})
const { data: page } = await useAsyncData(route.path, () => {
return queryCollection('docs').path(route.path).first()
})
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
return queryCollectionItemSurroundings('content', route.path)
})
</script>
<template>
<UPage>
<UPageHeader :title="page.title" :description="page.description" />
<UPageBody>
<ContentRenderer :value="page" />
<USeparator />
<UContentSurround :surround="surround" />
</UPageBody>
<template #right>
<UContentToc :links="page.body.toc.links" />
</template>
</UPage>
</template>
在此示例中，我们使用了
ContentRenderer来自 @nuxt/content 的组件来渲染页面内容。API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
插槽
| 插槽 | 类型 |
|---|---|
default |
|
主题
app.config.ts
export default defineAppConfig({
ui: {
pageBody: {
base: 'mt-8 pb-24 space-y-12'
}
}
})
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: {
pageBody: {
base: 'mt-8 pb-24 space-y-12'
}
}
})
]
})
更新日志
5cb65— 特性：导入 @nuxt/ui-pro 组件