NuxtN
Nuxt•2y ago
v02d

NuxtLink navigation to nested route does not show error page on client side navigation

Imagine we have nested route with error inside:

pages/course/[lessonSlug].vue
<script>
throw createError({message: "sus",fatal: true})
</script>

Here is how pages folder looks like:

-| pages/
---| course/
------| [lessonSlug].vue
---| course.vue
---| index.vue

Here is the problem, second NuxtLink with error in nested route:

pages/index.vue
<template>
  <NuxtLink to="/course">NuxtLink /course</NuxtLink>
  <NuxtLink to="/course/first_lesson">nuxtLink /first lesson</NuxtLink>
  <a href="/course/first_lesson">a /first lesson</a>
</template>


When I click on the /course NuxtLink everything is fine, I can press one of two links and NuxtErrorBoundary will do the thing and show fallback template.
When I click on second link with a nested route, the address bar changes, but nothing is re-rendered (the error page is not shown until page is refreshed).
If I go to the nested route using the a tag or the address bar, it will show an error page as it should be.
So should I just always use <a> with nested routes to be not afraid of unexpected errors?

pages/course.vue:
<template>
  <NuxtLink to="/course/first_lesson"></NuxtLink>
  <NuxtLink to="/course/first_lesson"></NuxtLink>
  <NuxtErrorBoundary>
    <NuxtPage/>
  
    <template #error="{error,clearError}"...>
  </NuxtErrorBoundary>
</template>
Was this page helpful?