NuxtLink @click action before routing

2.5k Views Asked by At

I need to run a method before NuxtLink navigates to a route. In the method I want to decide whether to release it or not. Like in vanilla JS:

<a href="some-page" onclick="return count > 10 ? true : false">Done</a>

I know how to stop NuxtLink and run the method instead, but how do I pause it, make some actions and decide whether to release it or not?

2

There are 2 best solutions below

0
Thomas K. On

You have to use @click.native with NuxtLink and RouterLink.

So, your code should look like this

<NuxtLink @click.native='clickAction()' to='/my-page'>
  Some link text
</NuxtLink>
1
S3n On

Nuxt3:

<script lang="ts" setup>
  const anyFunction = () => {
    console.log('easy')
  }
</script>

<template>
  <NuxtLink
    :to="'/'"
    @click.prevent="anyFunction()"
  >easy</NuxtLink>
</template>