Add clickable anchor links to headers in Nuxt Content

When you're browsing documentation sites, you'll often see that there is a little link or hashtag icon that appears when you hover over header text.

These are awesome because they link to the anchor tag for that header, making that specific section of documentation easier to share with others. 🤝

I created Cleavr's documentation site a while back using the NuxtJS Content module. If you visit their site, you'll notice they also have this feature enabled.

So, of course I wanted to do it for Cleavr's docs!

It's relatively easy to add, as there is an un-styled a href tag with classes icon and icon-link that you can tap into.

You'll just need to add some styles to expose the link.

I saw there was a reference on Create a Blog with Nuxt Content that tells you how to display it, but it only does half the job as I want the icons to only display when you hover over the header text.

If you are using Nuxt Content and TailwindCSS, here is a quick way to make it work:

Add an icon to static directory

For example, I added the hero icons link icon: static/icons/link.svg

Update CSS

Next, I updated the main.css file with the following:

.icon.icon-link {
  @apply absolute  opacity-0 h-4 -ml-6 w-10 bg-no-repeat;
  background-image: url('/icons/link.svg');
  margin-top: 6px
}

h2:hover .icon.icon-link, h3:hover .icon.icon-link, h4:hover .icon.icon-link, h5:hover .icon.icon-link {
  @apply opacity-100;
}

And that's it!

For the hover over opacity, if you know of a cleaner looking way to do that, please comment below! 🙏