Nuxt•4w ago

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•4w 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•4w ago

<@362623036307800064> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

rainbowdogOP•4w ago

And if i switch to an a tag, how can i add a exactActiveClass? @kapa.ai

Gaming

Programming

NuxtLink does not let me click