nuxt-toc

A Nuxt module for table of contents (TOC) component in your Nuxt Content projects.

✨ Release Notes

Features

📑 Automatically generates a TOC from your content
🔗 Links to sections within your content
🎨 Customizable styles and active state handling

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-toc

Quick Start

<template>
    <ContentDoc />
    <TableOfContents />
</template>

Styling

ID/Class	Type	Description
`toc-container`	ID	The container for the table of contents (TOC).
`toc-container`	Class	Styles the TOC container.
`toc-item`	Class	General class for TOC items.
`toc-topitem`	Class	Specific class for top-level TOC items.
`active-toc-item`	Class	Applied to active TOC items.
`active-toc-topitem`	Class	Applied to active top-level TOC items.
`toc-link`	Class	General class for TOC links.
`toc-toplink`	Class	Specific class for top-level TOC links.
`active-toc-link`	Class	Applied to active TOC links.
`active-toc-toplink`	Class	Applied to active top-level TOC links.
`toc-sublist`	Class	Styles the sublist within the TOC.
`toc-subitem`	Class	Specific class for sub-level TOC items.
`active-toc-subitem`	Class	Applied to active sub-level TOC items.
`toc-sublink`	Class	Specific class for sub-level TOC links.
`active-toc-sublink`	Class	Applied to active sub-level TOC links.
`toc-item-${link.id}`	ID	Dynamically generated ID for each TOC item, based on the `link.id`.
`toc-item-${link.id}`	Class	Dynamically generated class for each TOC item, based on the `link.id`.
`active-toc-item`	Class	Applied to active TOC items, dynamically based on `activeTocIds` or `lastVisibleHeading`.
`active-toc-topitem`	Class	Applied to active top-level TOC items, dynamically based on `activeTocIds` or `lastVisibleHeading`.
`active-toc-link`	Class	Applied to active TOC links, dynamically based on `activeTocIds` or `lastVisibleHeading`.
`active-toc-toplink`	Class	Applied to active top-level TOC links, dynamically based on `activeTocIds` or `lastVisibleHeading`.
`active-toc-subitem`	Class	Applied to active sub-level TOC items, dynamically based on `activeTocIds` or `lastVisibleHeading`.
`active-toc-sublink`	Class	Applied to active sub-level TOC links, dynamically based on `activeTocIds` or `lastVisibleHeading`.