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>