how add a href inside nuxt-link?

Question

I have array of cards like this

<nuxt-link :to="{ name: 'portfolio-slug', params: { slug: card.slug } }">
  <a :href="card.link>Go to href</a>
</nuxt-link>

click on card with nuxt-link should opening page with details of card

click on a href should open external site

but when i clicking on a-href its open details and ignoring a-href

tried use some tags for nuxt-link but not helped

Solution

If you click that <a> inside an <a> (it's just what <nuxt-link> generates) you are actually sending the click event to both elements. That it's not good practice (even stopping the propagation with js). just don't nest it

Perhaps absolute position it with css if it has to be on top of the "card".

Try something like:

<div class="card">
  <nuxt-link  :to="{ name: 'portfolio-slug', params: { slug: card.slug } }">
    {{ card.content }}
  </nuxt-link>
  <a class="card__cta" :href="card.link>Go to href</a>
</div>

and

.card {
  position: relative;
}

.card__cta {
  position: absolute;
  bottom: 24px; // depending where you need it, maybe you need top property
  right: 24px; // depending where you need it, maybe you need left property
}