nuxt-tocTable of Contents for Nuxt Content

The Nuxt module that turns your headings into a live, clickable outline. Works with Nuxt 4 (and 3.16+) and @nuxt/content v2 or v3.

Get started (5 min)

API reference

GitHub

Made for beginners

Copy-paste setup, clear errors, and a "pass-in" mode that reuses the page you already fetched — no magic queries to learn first.

Dual Content support

One module works with @nuxt/content v2 (queryContent) and v3 (queryCollection). It detects the installed major once and registers the right plugin.

Pass-in or auto-fetch

Recommended: :toc="page.body?.toc" from your page query. Optional: auto-fetches by route path or explicit path/collection props.

Active highlighting

Client-side IntersectionObserver tracks only the headings in your TOC and highlights the section you are reading. Tunable with rootMargin and scrollOffset.

Accessible & themeable

Stable CSS IDs/classes (#toc-title, #toc-container, .active-toc-item…) and ARIA roles so you can style it to match any design system.

Tiny runtime

No heavy dependencies. Depth limiting, batching, and rebuild skipping keep scroll-spy cheap even on long pages.