Nuxt•2mo ago

Error Handling: How to Display Errors on the Current Page Instead of Fullscreen

Hello, I need to control the fullscreen error handling in my Nuxt application. I would like to avoid switching to a fullscreen error page in case of fatal errors. Instead, I prefer to show a message or a popup on the current page. Thank you!

2 Replies

kapa.ai•2mo ago

Hi @bloodmoon1980. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To display errors on the current page instead of switching to a fullscreen error page in Nuxt, you should use the <NuxtErrorBoundary> component. This component allows you to catch and handle errors locally within a specific part of your app, rather than letting them bubble up and trigger the global error page. Here's how you can use it:

<template>
  <NuxtErrorBoundary>
    <!-- Your normal content goes here -->
    <template #error="{ error, clearError }">
      <div class="my-error-message">
        An error occurred: {{ error.message }}
        <button @click="clearError">Dismiss</button>
      </div>
    </template>
  </NuxtErrorBoundary>
</template>

<template>
  <NuxtErrorBoundary>
    <!-- Your normal content goes here -->
    <template #error="{ error, clearError }">
      <div class="my-error-message">
        An error occurred: {{ error.message }}
        <button @click="clearError">Dismiss</button>
      </div>
    </template>
  </NuxtErrorBoundary>
</template>

- Place the content you want to protect inside the default slot of <NuxtErrorBoundary>. - If an error occurs, the #error slot will be rendered instead, allowing you to show a custom message or even a popup/modal. - Calling clearError() will reset the error state and re-render the default slot. This approach prevents the global fullscreen error page from appearing for errors within the boundary, giving you full control over how errors are displayed locally on the current page. For more details and examples, see the NuxtErrorBoundary documentation and Error Handling guide. If you want to show a popup/modal, you can use a UI component like <UModal> from Nuxt UI inside the #error slot to display the error message in a modal dialog instead of inline content. For example:

<template>
  <NuxtErrorBoundary>
    <!-- Your normal content -->
    <template #error="{ error, clearError }">
      <UModal :model-value="true" title="Error">
        <div>{{ error.message }}</div>
        <UButton @click="clearError">Close</UButton>
      </UModal>
    </template>
  </NuxtErrorBoundary>
</template>

<template>
  <NuxtErrorBoundary>
    <!-- Your normal content -->
    <template #error="{ error, clearError }">
      <UModal :model-value="true" title="Error">
        <div>{{ error.message }}</div>
        <UButton @click="clearError">Close</UButton>
      </UModal>
    </template>
  </NuxtErrorBoundary>
</template>

This way, errors are shown as a popup on the current page, not as a fullscreen error page. Note: Fatal errors thrown outside of a <NuxtErrorBoundary> (e.g., in plugins, middleware, or the root app) will still trigger the global error page. For those, you would need to refactor your error handling to use boundaries or local error handling where possible. References: NuxtErrorBoundary docs, Error Handling guide, UModal usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Error Handling: How to Display Errors on the Current Page Instead of Fullscreen

Did you find this page helpful?