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>