[Vuejs]-Open a link within a container nuxt-link

by

1👍

✅

you shouldn’t do that since nested links are illegal and nuxt-link is just an a tag.
however, you can use a regular div instead of the a tag and use @click.prevent like

<nuxt-link 
  class="content-container-cta" 
  :to="'/new-page/'" 
  :title="'View the full details'">
  <---- Some content ---->
    <div v-if="showModal" @click.prevent="openModal" class="modal-link">
      Open Modal
    </div>
    <---- Some content ---->
</nuxt-link>

also look at https://vuejs.org/guide/essentials/event-handling.html#event-modifiers

check out this code sandbox that contains a working example using an a tag and a div inside it.
when you tap anywhere in the inner div (chocolate color block) it’ll just log in the console but if you click on the cyan colored box it’ll open a url in a new tab

👤Jimmar

Leave a comment