_duncanhall
_duncanhall
PostsComments
NNuxt
Created by _duncanhall on 6/25/2024 in #❓・help
Intercept click on NuxtLink and conditionally prevent navigation
Is it possible to include a click handler on a <NuxtLink> that can preform a check beofre conditionally allowing the navigation to continue? I would expect to be able to do something like this: 
function onLinkClick (event) {
  if (someCondition) {
    event.preventDefault()
  }
} 

<NuxtLink to="/somewhere" @click="onLinkClick" />
function onLinkClick (event) {
  if (someCondition) {
    event.preventDefault()
  }
} 

<NuxtLink to="/somewhere" @click="onLinkClick" />
In the above example, the onLinkClick function is called, but the navifation occurs regardless. Various posts online suggest using @click.native or @click.prevent but these make no difference - the click handler is called but the navigation always immediately occurs. I have also tried stopImmediatePropagation in place of preventDefault with no change. How can we programattically intercept a NuxtLink click?
3 replies