Pagebody
El contenido principal de tu página.
xph0000xUso
El componente PageBody envuelve su contenido principal y agrega un poco de relleno para un espaciado consistente.
Úselo dentro de la ranura predeterminada del componente Page, después del componente PageHeader:
<template>
<UPage>
<UPageHeader />
<UPageBody />
</UPage>
</template>
Ejemplos
Si bien estos ejemplos utilizan Nuxt Content, los componentes se pueden integrar con cualquier sistema de gestión de contenido.
Dentro de una página
Utilice el componente PageBody de una página para mostrar el contenido de la página:
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>
En este ejemplo, utilizamos el componente
ContentRenderer de @nuxt/content para representar el contenido de la página.API (Edición española)
Accesorios
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
ui | { base?: any; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Temas
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'
}
}
})
]
})Changelog (Edición española)
No recent changes