Installation

Module

npx nuxi module add nuxt-toc
# or
npm install nuxt-toc

Ensure @nuxt/content is installed as a peer:

# Content v3 (recommended for new apps)
npm install @nuxt/content@^3

# or Content v2
npm install @nuxt/content@^2

Register the module

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-toc', '@nuxt/content'],
  nuxtToc: {
    // Content v3 auto-fetch only
    collection: 'content',
  },
})

Content v3 collections

Create content.config.ts in the app root:

import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md',
    }),
  },
})

Content v2 does not use collections or content.config.ts.

Verify

In a page:

<template>
  <TableOfContents :toc="page?.body?.toc" />
</template>

If the component is missing, run nuxi prepare and confirm nuxt-toc is listed under modules.