Nuxt.js: NuxtLink duplicates child anchor tag

[smoooty]

Versions

• nuxt: 2.14.1
• node: v10.21.0 (seems like thats what the codesandbox is running for the reproduction, but I don't think its too relevant. I observed the same behavior on ~12.14 on my machine).

Reproduction

Reproduction codesandbox link

Additional Details

Steps to reproduce

1. Create a nuxt-link component.
2. Add two children items, one of which is an anchor tag.

What is Expected?

The nuxt-link component contains only the two children items.

The dom is expected to show:

<a>
   first child item
   <a href="/">anchor tag child item</a>
</a>

What is actually happening?

The nuxt-link component returns the two children items expected, but also returns a duplicate of the anchor tag child item.

As a result the dom shows:

<a>
   first child item
   <a href="/">anchor tag child item</a>
</a>
<a href="/">anchor tag child item</a>

[manniL]

You can't nest anchor tags inside NuxtLink tags (as the latter will be rendered as an anchor tag as well). That's invalid HTML

[smoooty]

It does seem weird that the NuxtLink would replicate the child anchor tag, I'm not sure how/why that's happening. The RouterLink in vue router seems to allow it.

[danielroe]

@smooty It does render what you are expecting. Try looking at the raw HTML returned by the server.

<a href="/about" class="button--grey">
  link
<a href="https://nuxtjs.org/" target="_blank" class="button--green">replicated anchor tag</a></a>

But the browser realises that it is bad HTML and tries to correct it, which ultimately results in a differing DOM.

[smoooty]

@danielroe interesting, thank you for the explanation!