7

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?

Improve this question
2
  • How are you generating the nuxt link? Commented Nov 27, 2020 at 19:01
  • did you fix it? Commented Jan 28, 2022 at 3:34

3 Answers 3

Reset to default
19

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Taking the above example; I'm dynamically setting the link uri text and doing <a :href="link">click me</a> and that's having the same issue in that its also generating the leading '/' as above. Any ideas?
5

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.

Improve this answer

Comments

4

For Nuxt 2:

Use <a> elements for external links, 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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.