nuxt-x-affiliate
Table of Contents
Auto-generated TOC from article headings with optional active-section highlighting on scroll.
Table of Contents
The XAFTableOfContents component renders a sticky sidebar TOC — auto-extracts <h2> and <h3> headings from the article body (default selector: article) and renders them as anchor links. Uses IntersectionObserver to highlight the section currently in view.
Components
<XAFTableOfContents />
<XAFTableOfContents title="On this page" sticky :active-highlight="true" />
<!-- Or pass items explicitly -->
<XAFTableOfContents
:items="[
{ id: 'how-we-test', text: 'How we test', level: 2 },
{ id: 'scoring', text: 'Scoring', level: 2 },
{ id: 'sub-criteria', text: 'Sub-criteria', level: 3 },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Table of Contents" | Section heading. |
scope | string | "article" | CSS selector for the article body to extract headings from. |
items | TOCItem[] | — | Pass items explicitly to skip auto-extraction. Each: { id, text, level }. |
sticky | boolean | true | Sticky-position the TOC. |
activeHighlight | boolean | true | Highlight the active section on scroll (uses IntersectionObserver). |
Headings without an id get one auto-generated from their text content (kebab-cased, special chars stripped). The active section is determined by an observer with rootMargin: "-20% 0px -70% 0px" — roughly the top 30% of the viewport.
AI Context
component: XAFTableOfContents
package: "@xenterprises/nuxt-x-affiliate"
use-when: Auto-generated sticky TOC from article headings with optional active-section highlighting on scroll.