<NuxtLink> in Nuxt 3 only show the page's content after refreshing

Question

I am trying to use <NuxtLink> to redirect in Nuxt 3.

However, my page won't show after the URL change. That means, after clicking the link, the URL changes to whatever is stated in the to="", but the content doesn't show unless I refresh the page. Wonder what did I do wrong.

Here is my Routing code

 <template>
      <div class="top-nav-tab">
        <NuxtLink to="/foundations"><h3>Foundations</h3></NuxtLink>
     </div>
   </template>

Here is my page code

<template>
  <h2>Foundation page</h2>
</template>

Hoosegow

Hi, could you please show us your routes? – Swaddle

there is nothing wrong with that code, are you sure you have all the dependencies up to date? – Dynameter

It's related to useAsyncData if you're using it in a lazy mode, something doesn't fetch from API correctly, thus it won't show anything – Gabar

I wonder if it is fixed? 🤔 – Frogmouth

Check your console maybe you have error in your console. – Vestiary

Answer 1

Instead of using NuxtLink, Why not use another implementation like: navigateTo() as Nuxtlink creates a lazyloaded component by default? So in this use case just do something like

<h3 @click="navigateTo('/foundation')"> Foundation </h3>

This would perform the action; and its preferred way by the documentation

Perni

Lazy loaded component? You rather mean prefetching no? Also, a11y semantics are important: a link should move you to a place, not a button or even an h3. – Swaddle

Answer 2

I've got the same issue so I use native javascript instead.

// Simulate a mouse click:
window.location.href = "/";

// Simulate an HTTP redirect:
window.location.replace("/");

Captive

Nope, please DO NOT use this because you will nuke your SPA. There is no point into doing that. Totally counter-productive. – Swaddle

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Anele