TableOfContents

The XBLTableOfContents component renders a navigation list from the heading structure of the current post. On the pre-built /blog/[...slug] page it is shown when the showTableOfContents flag in xBlog app config is enabled, wrapped in a sticky aside.

Components

<XBLTableOfContents />

Pass the TOC links from the parsed Nuxt Content page body (post.body.toc.links). Heading depth is rendered as indentation; anchor links point at the heading ids. Renders nothing when the list is empty.

<script setup lang="ts">
const { data: post } = await useAsyncData('post', () =>
  queryCollection('blog').path('/blog/my-post').first(),
)
const tocLinks = computed(() => post.value?.body?.toc?.links ?? [])
</script>

<template>
  <XBLTableOfContents :links="tocLinks" />
</template>

Props

AI Context

component: XBLTableOfContents
package: "@xenterprises/nuxt-x-blog"
use-when: Sidebar navigation for headings on a blog post page — pass body.toc.links from queryCollection