Nuxt link to external url adding slash before URL

user_630203 0
Viewed 11813

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

enter image description here

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?

nuxt.js
3 Answers

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>
user_102039860

TLDR;

Use <a> tags, instead of <NuxtLink>

Explanation:

The <NuxtLink> component should be used for all internal links. That means for all links to the pages within your site you should use <NuxtLink>.

The <a> tag should be used for all external links. That means if you have links to other websites you should use the <a> tag for those.

Source: Nuxtjs Documentation

user_37394100

Update in Nuxt 3, NuxtLink now supports all kinds of links, be it external or internal Reference

Nuxt provides component to handle any kind of links within your application.

So your component should work fine now if you update to Nuxt 3.

user_138546160
Related