PaginaLichaam
De belangrijkste inhoud van uw pagina.
Gebruik
De PageBody-component omhult uw hoofdinhoud en voegt wat opvulling toe voor een consistente afstand.
Gebruik het in de standaardsleuf van de Page component, na de PageHeader component:
<template>
<UPage>
<UPageHeader />
<UPageBody />
</UPage>
</template>
Voorbeelden
Hoewel deze voorbeelden Nuxt Content gebruiken, kunnen de componenten worden geïntegreerd met elk contentbeheersysteem.
Binnen een pagina
Gebruik de PageBody-component in een pagina om de inhoud van de pagina weer te geven:
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>
In dit voorbeeld gebruiken we de
ContentRenderer component van @nuxt/content om de inhoud van de pagina weer te geven.API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
ui | { base?: any; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Thema
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'
}
}
})
]
})Wijzigingsgelog
No recent changes