useContent()
This composable will only be enabled if you toggle the Document-driven feature!
Usage
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>Examples
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>Creating a 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>Creating a 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>