When the document driven mode is enabled, useContent() is available everywhere in your app and gives access to a list of refs based on your content.

<script setup lang="ts">
const {
  // Global references
  globals,
  navigation,
  surround,
  page,
  // Computed properties from `page` key
  excerpt,
  toc,
  type,
  layout,
  // Computed properties from `surround` key
  next,
  prev
} = useContent()
</script>

Rendering the page

Rendering the current page becomes a bliss with this composable:

<script setup lang="ts">
const { page } = useContent()
</script>

<template>
  <ContentRenderer :key="page._id" :value="page" />
</template>

Previous/next page component

<script setup lang="ts">
const { prev, next } = useContent()
</script>

<template>
  <div>
    <NuxtLink v-if="prev" :to="prev._path">{{ prev.title }}</NuxtLink>
    <NuxtLink v-if="next" :to="next._path">{{ next.title }}</NuxtLink>
  </div>
</template>

Table of Contents component

<script setup lang="ts">
const { toc } = useContent()
</script>

<template>
  <div>
    <ul v-if="toc && toc.links">
      <li v-for="link in toc.links" :key="link.text">
        <a :href="`#${link.id}`">
          {{ link.text }}
        </a>
      </li>
    </ul>
  </div>
</template>