nuxt-toc

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

✨ Release Notes

Features ✨

🎨 Highly Customizable: Tailor it to fit your unique needs.
🔍 Active TOC Highlighting: Easily see which section you're in.
📦 Out of the Box: Ready to use with minimal setup.
🔗 Section Links: Navigate seamlessly within your content.

Quick Start 🔧

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-toc

Add <TableOfContents /> at where TOC is needed.

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

Props

Prop	Type	Default	Description
`path`	String	`''`	The path to the content for which the TOC is generated. If not set, `nuxt-toc` will default to using the current URI as the path.
`is-sub-list-shown`	Boolean	`true`	Determines whether the sublist within the TOC is shown.
`title`	String	`'Table of Contents'`	The title of the TOC.

Styling

ID/Class	Type	Description
`toc-container`	ID	The container for the table of contents (TOC).
`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`.

Cookbook

TOC with custom color for active items and custom padding for subitems.

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

<style>
/* Styling for active Table of Contents items */
.active-toc-item {
  color: #84cc16;
}

/* Indentation for second-level Table of Contents items */
.toc-subitem {
  padding-left: 1.5rem;
}
</style>