Correct way to generate a Table of Contents (top) in Nuxt Content v2?

[jshimkoski]

This may be a dumb question but is there a recommendation for how to properly generate the Table of Contents (based on h1-h6 tags) for a page in Nuxt Content v2?

I see there is a configuration option for "toc" (https://content.nuxtjs.org/api/configuration#toc), however, I can't find a reference on how to access it anywhere in the documentation.

I've looked through the returned value of <ContentDoc> and there is nothing alluding to "toc". I could finagle something together with doc.body but that seems a bit hacky. Is there a more refined approach?

Like, is there an undocumented <ContentToc> element or something that I'm missing?

Any help is most appreciated. Thanks!

[jshimkoski]

Just realized that I had missed the toc key inside doc.body. Doh!

So, for anyone else wondering the same thing, look for doc.body.toc and that will provide you an array of links that you can use to generate your table of contents.

[orenmizr]

not sure i understood your answer.
can you please paste the code that works for you ? docs is int accessible for me in content v2

[oneminch]

In your catch-all route, like [...slug].vue, you can add something like this:

<!-- ~/pages/[...slug].vue -->

<template>
  <main>
    <ContentDoc v-slot="{ doc }">
      <!-- Post title -->
      <h1 class="mb-4">{{ doc.title }}</h1>

      <!-- Table of contents -->
      <ul>
        <li v-for="link of doc.body.toc.links" :key="link.id">
          <a :href="`#${link.id}`">{{ link.text }}</a>
        </li>
      </ul>

      <!-- Main post content -->
      <ContentRenderer :value="doc" />
    </ContentDoc>
  </main>
</template>

<!-- ~/content/index.md -->

---
title: Home
---

Hey there!

## Section 1

Section 1 content

## Section 2

Section 2 content

## Section 3

Section 3 content

For a markdown file with the above content, you will get an output like this:

[andika-eka]

you can all get the nested link by accessing the children property

<ContentDoc v-slot="{ doc }">
    <ul>
        <li v-for="link of doc.body.toc.links" :key="link.id">
            <a :href="`#${link.id}`">{{ link.text }}</a>
            <ul>
                <li v-for="link1 of link.children" :key="link1.id">
                    <a :href="`#${link1.id}`">{{ link1.text }}</a>

                </li>
            </ul>

        </li>
    </ul>
</ContentDoc>

found it here: https://github.com/nuxt-modules/mdc/blob/b89db73a82624760cd6fa5b85ede263b95ff157e/src/runtime/parser/toc.ts#L30

[Larscode-io]

awesome, thank you !