Creating a TOC from a slice zone headers

[mortenhagh (Morten Jensen)]

I am trying to figure out how I can make a TOC (Table Of Contents) in NUXT from all the headers in a slice zone.

If I am building a page with for example 4 paragraphs each with a H2 header and some H3 headers I want to take out all those headers from the slice zone and then build the TOC.

Does anyone have a good approach to this?

[Phil (Phil Snow)]

Hi Morten,

Welcome to the community!

I actually explain how to do that in Vue/Nuxt on this post here:

In-page Anchors

Hey @jerry.nummi, For your use case of the sub navigation. Something I do is use the HTMLSerializer to automatically add id's to my H2's from my rich texts. Like I do here: if (type === Elements.heading2) { var id = element.text.replace(/\W+/g, '-').toLowerCase(); return '<h2 id="' + id + '">' + children.join('') + '</h2>'; } Then I build a component that looks at the Slices on the current page, takes any H2 titles and creates a link to these. This example is in Vue, but you can e…

Let me know if you have any questions about this.

Thanks.

[mortenhagh (Morten Jensen)]

That works perfectly! Thanks!