Environment
- Operating System:
Windows 11
- Node Version:
v22.20.0
- Nuxt Version:
4.3.0
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.4.0
Reproduction
No reproduction needed as the code simply displays the problem clearly. Here is the permalink to the exact function:
|
nuxtApp.hooks.hook('page:loading:end', () => { |
|
const headings = Array.from(document.querySelectorAll('h2, h3')) |
|
updateHeadings(headings) |
|
}) |
|
nuxtApp.hooks.hook('page:transition:finish', () => { |
|
const headings = Array.from(document.querySelectorAll('h2, h3')) |
|
updateHeadings(headings) |
|
}) |
Description
Problem
In the UContentToc component, the useScrollSpy is attached to h2 and h3 headings independently of the content/build/markdown/toc/depth configuration entry of Nuxt Content.
This can cause the height of the indicator to be "wrong".
Consider a document in which we have h3 headings but the depth of the toc has been set to 1, this causes the indicator to be bigger since it is using h3 headings to compute height.
Example
The following image clearly displays this problem.
The toc.links are the following:
[
{
"id": "the-ai-overview-imperative-what-it-is-and-why-it-matters",
"depth": 2,
"text": "The AI Overview Imperative: What it is and why it matters"
},
{
"id": "beyond-seo-embracing-answer-engine-optimization-aeo",
"depth": 2,
"text": "Beyond SEO: Embracing Answer Engine Optimization (AEO)"
},
{
"id": "core-strategies-for-ai-overview-visibility",
"depth": 2,
"text": "Core Strategies for AI Overview Visibility"
},
{
"id": "reviy-your-ai-visibility-partner",
"depth": 2,
"text": "Reviy: Your AI Visibility Partner"
},
{
"id": "secure-your-first-response-positioning",
"depth": 2,
"text": "Secure Your First-Response Positioning"
}
]But the UContentToc component is using the following links to compute indicator height:
|
nuxtApp.hooks.hook('page:loading:end', () => { |
|
const headings = Array.from(document.querySelectorAll('h2, h3')) |
|
updateHeadings(headings) |
|
}) |
|
nuxtApp.hooks.hook('page:transition:finish', () => { |
|
const headings = Array.from(document.querySelectorAll('h2, h3')) |
|
updateHeadings(headings) |
|
}) |
Possible fix
A possible fix is to only "spy" the links passed by the content toc or to pass a maximum "depth" to spy.
Additional context
No response
Logs
Environment
Windows 11v22.20.04.3.0Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.4.0
Reproduction
No reproduction needed as the code simply displays the problem clearly. Here is the permalink to the exact function:
ui/src/runtime/components/content/ContentToc.vue
Lines 135 to 142 in 8f8d989
Description
Problem
In the UContentToc component, the
useScrollSpyis attached toh2andh3headings independently of thecontent/build/markdown/toc/depthconfiguration entry of Nuxt Content.This can cause the height of the indicator to be "wrong".
Consider a document in which we have
h3headings but thedepthof the toc has been set to 1, this causes the indicator to be bigger since it is usingh3headings to compute height.Example
The following image clearly displays this problem.
The
toc.linksare the following:[ { "id": "the-ai-overview-imperative-what-it-is-and-why-it-matters", "depth": 2, "text": "The AI Overview Imperative: What it is and why it matters" }, { "id": "beyond-seo-embracing-answer-engine-optimization-aeo", "depth": 2, "text": "Beyond SEO: Embracing Answer Engine Optimization (AEO)" }, { "id": "core-strategies-for-ai-overview-visibility", "depth": 2, "text": "Core Strategies for AI Overview Visibility" }, { "id": "reviy-your-ai-visibility-partner", "depth": 2, "text": "Reviy: Your AI Visibility Partner" }, { "id": "secure-your-first-response-positioning", "depth": 2, "text": "Secure Your First-Response Positioning" } ]But the UContentToc component is using the following links to compute indicator height:
ui/src/runtime/components/content/ContentToc.vue
Lines 135 to 142 in 8f8d989
Possible fix
A possible fix is to only "spy" the links passed by the content toc or to pass a maximum "depth" to spy.
Additional context
No response
Logs