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 already 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:

Step 1: Add an icon to static directory

Add the icon to the static directory that you want to display when hovering over a section header.

For example, I added the hero icon's link icon to static/icons/link.svg

Step 2: Update CSS

The next step is to update 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! 🎉