app.vue
<script setup lang="ts">
const links = [
  { to: '/', label: 'Home' },
  { to: '/about', label: 'About' },
  { to: '/contact', label: 'Contact' }
]
</script>

<template>
  <UHeader :links="links" />

  <UMain>
    <ULandingHero title="Hello World" />

    <ULandingSection title="Features">
      <UPageGrid>
        <ULandingCard title="First Card" />
        <ULandingCard title="Second Card" />
        <ULandingCard title="Third Card" />
      </UPageGrid>
    </ULandingSection>
  </UMain>

  <UFooter />
</template>

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>
      <UDocsToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>