document driven
useContent()
The useContent() composable gives access to the current page, surrounding pages and global data.
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:
pages/[...slug].vue
<script setup lang="ts">const { page } = useContent()</script><template> <ContentRenderer :key="page._id" :value="page" /></template>Previous/next page component
PagePrevNext.vue
<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
PageToc.vue
<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>