Nuxt•2y ago

NuxtLink not working on error.vue page

Hello,

I created a page error.vue at the root of the project that extends the current layout but all the nuxtlink are no longer working when on this page.

The url change but the content is not refreshed

In the console, I have the following

Uncaught (in promise) TypeError: node is null
NuxtJS 51
parentNode
componentUpdateFn
run
update
callWithErrorHandling
flushJobs
promise callbackqueueFlush
queueJob
effect
resetScheduling
triggerEffects
triggerRefValue
set value
finalizeNavigation
pushWithRedirect
promise callbackpushWithRedirect
push
navigate
callWithErrorHandling
callWithAsyncErrorHandling
invoker
addEventListener
patchEvent
patchProp
hydrateElement
hydrateNode
hydrateSubTree
componentUpdateFn
run
update
setupRenderEffect
mountComponent
hydrateNode
hydrateSubTree
componentUpdateFn
run
update
setupRenderEffect
mountComponent
hydrateNode
hydrateSubTree
componentUpdateFn
run
update
setupRenderEffect
mountComponent
hydrateNode
hydrateChildren
hydrateElement
hydrateNode
hydrateChildren

KumzyOP•3/7/24, 2:07 PM

My error.vue page looks like this

<template>
  <NuxtLayout>
  <main class="grid min-h-full place-items-center my-custom-bg-class2 px-6 py-6 sm:py-16 lg:px-8">
    <div class="text-center">
      <p class="text-base font-semibold text-primary-600">404</p>
      <h1 class="mt-2 text-3xl font-bold tracking-tight text-primary-800 sm:text-5xl">{{ $t('page-404.title')}}</h1>
      <p class="mt-2 text-base leading-7 text-gray-600">{{ $t('page-404.subtitle')}}</p>
      <NuxtImg class="max-h-56 mt-8 object-contain object-center" src="images/404/Racoon404.png" :alt="$t('page-404.textalt')" width="512" height="512" />
      <div class="mt-8 flex items-center justify-center gap-x-6">
          <NuxtLinkLocale to='/' class="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 rounded-md bg-secondary-500 px-3.5 py-2.5 text-sm font-semibold text-dark-500 shadow-sm hover:bg-secondary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-600">{{ $t('return-home') }} </NuxtLinkLocale>
          <NuxtLinkLocale to='/contactus' class="text-sm font-semibold text-primary-900 hover:text-secondary-700">{{ $t('contact-us') }}  <span aria-hidden="true">&rarr;</span></NuxtLinkLocale>
      </div>
    </div>
  </main> 
</NuxtLayout>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

</script>

<template>
  <NuxtLayout>
  <main class="grid min-h-full place-items-center my-custom-bg-class2 px-6 py-6 sm:py-16 lg:px-8">
    <div class="text-center">
      <p class="text-base font-semibold text-primary-600">404</p>
      <h1 class="mt-2 text-3xl font-bold tracking-tight text-primary-800 sm:text-5xl">{{ $t('page-404.title')}}</h1>
      <p class="mt-2 text-base leading-7 text-gray-600">{{ $t('page-404.subtitle')}}</p>
      <NuxtImg class="max-h-56 mt-8 object-contain object-center" src="images/404/Racoon404.png" :alt="$t('page-404.textalt')" width="512" height="512" />
      <div class="mt-8 flex items-center justify-center gap-x-6">
          <NuxtLinkLocale to='/' class="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 rounded-md bg-secondary-500 px-3.5 py-2.5 text-sm font-semibold text-dark-500 shadow-sm hover:bg-secondary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-600">{{ $t('return-home') }} </NuxtLinkLocale>
          <NuxtLinkLocale to='/contactus' class="text-sm font-semibold text-primary-900 hover:text-secondary-700">{{ $t('contact-us') }}  <span aria-hidden="true">&rarr;</span></NuxtLinkLocale>
      </div>
    </div>
  </main> 
</NuxtLayout>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

</script>

KumzyOP•3/7/24, 2:25 PM

I added @click="clearError()" on the nuxtlink but I do not know if this is the way

<template> <NuxtLayout> <main class="grid min-h-full place-items-center my-custom-bg-class2 px-6 py-6 sm:py-16 lg:px-8"> <div class="text-center"> <p class="text-base font-semibold text-primary-600">404</p> <h1 class="mt-2 text-3xl font-bold tracking-tight text-primary-800 sm:text-5xl">{{ $t('page-404.title')}}</h1> <p class="mt-2 text-base leading-7 text-gray-600">{{ $t('page-404.subtitle')}}</p> <NuxtImg class="max-h-56 mt-8 object-contain object-center" src="images/404/Racoon404.png" :alt="$t('page-404.textalt')" width="512" height="512" /> <div class="mt-8 flex items-center justify-center gap-x-6"> <NuxtLinkLocale to='/' class="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 rounded-md bg-secondary-500 px-3.5 py-2.5 text-sm font-semibold text-dark-500 shadow-sm hover:bg-secondary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-600">{{ $t('return-home') }} </NuxtLinkLocale> <NuxtLinkLocale to='/contactus' class="text-sm font-semibold text-primary-900 hover:text-secondary-700">{{ $t('contact-us') }} <span aria-hidden="true">→</span></NuxtLinkLocale> </div> </div> </main> </NuxtLayout> </template> <script setup lang="ts"> import type { NuxtError } from '#app' const props = defineProps({ error: Object as () => NuxtError }) </script>

NuxtLink not working on error.vue page

Similar Threads

Similar Threads

Similar Threads