Search code examples
htmlnuxt.jsmarkdownnuxt3.jsnuxt-content

Nuxt Content v2 markdown headers rendered as URLs


I'm writing Markdown content in Nuxt 3 & Nuxt Content 2.1 and I am facing a problem as I cannot write h2-h6 headers without it rendering them as links.

h1 works fine with one octothorpe symbol but as soon as I add 1 or more of them to render smaller headers, the application automatically transforms them to URLs.

Content is rendered with the default [...slug].vue and <ContentDoc /> configuration as seen in the documentation.

What's written in Markdown:

# header 1

## header 2

... and what's actually being rendered in HTML:

<h1 id="header-1">
  <!--[-->
  header 1
  <!--]-->
</h1>

<h2 id="header-2">
  <a href="#header-2">
    <!--[-->
    header 2
    <!--]-->
  </a>
</h2>

Is there any way to solve this?

EDIT:

Nuxt is also transforming simple HTML <h2> tags to links, but now with an undefined href:

<h2>header 2</h2>

to

<h2>
  <a href="#undefined">
    header 2
  </a>
</h2>

Solution

  • You can also change this behaviour in your nuxt.config file

    content: {
      markdown: {
        anchorLinks: false,
      }
    },
    

    https://content.nuxtjs.org/api/configuration/#anchorlinks