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>