Nuxt link to external url adding slash before URL

Question

I have a nuxt-link and if I inspect element with the Vue inspector I get something like this:

Note the to attribute. But if I inspect element, sure enough the href attribute is different:

<p class="more-link-block">
  <a href="/https://www.forbes.com/sites/solitairetownsend/2020/11/16/100-uk-leading-environmentalists-who-happen-to-be-women/?sh=2b11cc462451" target="_blank" class="anchor-tag small-caps">
  Trending&nbsp;→
  </a>
</p>

A \ has been appended. This is not present in the JSON feed that is populating the site.

Is this a common "gotcha" with nuxt, or do I need to do something differently? Or do I need to raise an issue?

Answer 1

The NuxtLink component is used to navigate only to other pages inside your same application.

If you are redirecting your user to an external link (with a different top level domain) just simply use a regular anchor tag!

<a href="https://www.forbes.com/sites/solitairetownsend/2020/11/16/100-uk-leading-environmentalists-who-happen-to-be-women/?sh=2b11cc462451" target="_blank">External Link to Forbes</a>