Page
A dynamic grid layout for your pages.
Usage
The Page component will allow you to structure your pages as a grid with a left or right column. When no slots are provided, the page will be a single column.
<template>
<UPage>
<template #left>
<!-- <UAside /> -->
</template>
<template #right>
<!-- <UContentToc /> -->
</template>
</UPage>
</template>
You'll usually use this component in a layout or parent .vue page with its #left slot:
pages/docs.vue
<script setup lang="ts">
import type { NavItem } from '@nuxt/content'
const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))
</script>
<template>
<UContainer>
<UPage>
<template #left>
<UAside>
<UNavigationTree :links="mapContentNavigation(navigation)" />
</UAside>
</template>
<!-- Change this to `<slot />` when in a layout. -->
<NuxtPage />
</UPage>
</UContainer>
</template>
But you can also use it in a [...slug].vue page with its #right slot:
pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
</script>
<template>
<UPage>
<UPageHeader :title="page.title" :description="page.description" :links="page.links" />
<UPageBody prose>
<ContentRenderer v-if="page.body" :value="page" />
</UPageBody>
<template #right>
<UContentToc :links="page.body.toc.links" />
</template>
</UPage>
</template>
Slots
left
{}
right
{}
default
{}
Props
ui
DeepPartial<{ wrapper: string; left: string; center: { narrow: string; base: string; full: string; }; right: string; }>
{}Config
{
wrapper: 'flex flex-col lg:grid lg:grid-cols-10 lg:gap-8',
left: 'lg:col-span-2',
center: {
narrow: 'lg:col-span-6',
base: 'lg:col-span-8',
full: 'lg:col-span-10'
},
right: 'lg:col-span-2 order-first lg:order-last'
}