NuxtLink does not let me click

Hello, main issue is when I am on the same page I'm trying to click on, it does not refresh the page. It does not even let me click it as a link, nothing in the network tab as well. Code:
<NuxtLink :to="to" class="px-4 py-4 w-full rounded-md font-bold tracking-wide text-center transition duration-300
border border-green-300"
exactActiveClass="bg-green-400 border-green-500"
@click="isOpen = false"
>
{{ title }}
</NuxtLink>
<NuxtLink :to="to" class="px-4 py-4 w-full rounded-md font-bold tracking-wide text-center transition duration-300
border border-green-300"
exactActiveClass="bg-green-400 border-green-500"
@click="isOpen = false"
>
{{ title }}
</NuxtLink>
3 Replies
kapa.ai
kapa.ai3w ago
Hi @rainbowdog. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your issue with NuxtLink not allowing clicks on the same page. The behavior you're experiencing is actually by design. NuxtLink is a component that leverages Vue Router's functionality, which is optimized for single-page applications. When you're already on the page that the link points to, Vue Router prevents unnecessary navigation to the same route. However, there are a few things you can try to address this: 1. Use the custom prop: You can use the custom prop on NuxtLink to take full control of how the link is rendered and how navigation works when clicked. This might allow you to force a refresh or handle the click event differently.
<NuxtLink :to="to" custom v-slot="{ navigate }">
<span @click="navigate" class="...your classes...">
{{ title }}
</span>
</NuxtLink>

<NuxtLink :to="to" custom v-slot="{ navigate }">
<span @click="navigate" class="...your classes...">
{{ title }}
</span>
</NuxtLink>

NuxtLink Props (https://nuxt.com/docs/api/components/nuxt-link#props) 2. Use replace prop: If you want to replace the current history entry instead of adding a new one, you can use the replace prop:
<NuxtLink :to="to" replace class="...your classes...">
{{ title }}
</NuxtLink>

<NuxtLink :to="to" replace class="...your classes...">
{{ title }}
</NuxtLink>

NuxtLink Props (https://nuxt.com/docs/api/components/nuxt-link#props) 3. Handle the click event manually: If you need more control, you could handle the click event manually and use the navigateTo function:
<template>
<span @click="handleClick" class="...your classes...">
{{ title }}
</span>
</template>

<script setup>
const handleClick = () => {
navigateTo(to, { replace: true })
}
</script>

<template>
<span @click="handleClick" class="...your classes...">
{{ title }}
</span>
</template>

<script setup>
const handleClick = () => {
navigateTo(to, { replace: true })
}
</script>

Programmatic Navigation (https://nuxt.com/docs/migration/pages-and-layouts#programmatic-navigation) Remember, if you're trying to refresh the page data without a full page reload, you might need to look into other solutions like refetching your data or using a custom event system. If these suggestions don't solve your specific use case, you might want to consider if a full page refresh is really necessary, as it goes against the principles of a single-page application. If it is absolutely necessary, you might need to use a regular <a> tag with a full href, but be aware that this will cause a full page reload and lose the benefits of client-side navigation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3w ago
<@362623036307800064> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
rainbowdog
rainbowdogOP3w ago
And if i switch to an a tag, how can i add a exactActiveClass? @kapa.ai
Want results from more Discord servers?
Add your server