Intro

When reading a blog post online, I’ve always really enjoyed a table of contents on the side of the page indicating the position you are in the article. To me, it’s super helpful for gauging article length and assisting in navigation between topics.

Since I’ve decided to use the Nuxt Content module for this blog, I wanted to implement something that would indicate the active section of an article since the module injects the incredibly useful toc variable into every .md file in my content folder. This saves a of time and energy as you don’t need to manually create a table of contents for every article!

This article will teach you how to create a sticky table of contents sidebar with active states based on your current scroll position using the Intersection Observer API and Nuxt Content!

If you’d prefer to jump right into the code, check out the Code Sandbox I’ve prepared. below which mirrors what we’ll be implementing.

#nuxt #vue #vuejs #nuxtjs