How to create table of content from rendered HTML? (custom template)

[etienne-monier]

Hi !

I'm making my own template with vuetify.

I want to make a sidebar with current page table of content (as the right one on vuetify site).

Yet, to set the list vue ref, I need to know the list of h1-h6 headers, and so the rendered HTML code.

I saw I could make a transformHtml hook, but I'm not sure that's the solution...

Can you help me?

[brc-dd]

two ways - use querySelectorAll and iterate + extract headings from them, or set markdown.headers true in your vitepress config, then you can access headers from useData().page.value.headers

the markdown.headers option will result in wrong data for dynamically rendered heading elements