components: error & loading

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

error.vue custom error page

Customize the default error page by creating an error.vue file in the source directory alongside app.vue. The error.vue component receives a prop named error of type NuxtError. The clearError function can be called to dismiss the error page, optionally with a redirect path.

NuxtErrorBoundary component purpose

The NuxtErrorBoundary component allows handling of client-side errors within an app without replacing the entire site with an error page. It prevents errors in its default slot from bubbling up to the top level and renders the #error slot instead. The error slot receives error and clearError props.

NuxtErrorBoundary error slot

The #error slot of NuxtErrorBoundary receives props: error and clearError. When error is set to null, it triggers re-rendering of the default slot. Navigating to another route automatically clears the error.

Fatal error page rendering

When Nuxt encounters a fatal error (any unhandled error on the server, or an error created with fatal: true on the client), it will render a JSON response if requested with Accept: application/json header, or trigger a full-screen error page otherwise.

useError in error.vue

In error.vue, the error prop provides the NuxtError object. To clear the error and redirect, call handleError() which invokes clearError({ redirect: '/' }).

error.vue file location and purpose

The error.vue file is the error page in a Nuxt application that overrides the default error display. It should not be placed in the ~/pages directory and should not use definePageMeta within it. It is not a route.

error.vue props

The error.vue component receives a single prop named 'error' of type NuxtError containing the error to handle.

NuxtError interface

The NuxtError interface has the following fields: status (number, required), fatal (boolean, required), unhandled (boolean, required), statusText (string, optional), data (unknown, optional), and cause (unknown, optional).

error.vue custom error fields handling

Custom fields on error objects will be lost during error handling. Custom fields should be assigned to the data field of the error instead to persist them.

error.vue layout support

Layouts can be used in the error.vue file by utilizing the NuxtLayout component and specifying the name of the layout.

error.vue example implementation

Example of error.vue implementation: ```vue <script setup lang="ts"> import type { NuxtError } from '#app' const props = defineProps<{ error: NuxtError }>() </script> <template> <div> <h1>{{ error.status }}</h1> <NuxtLink to="/">Go back home</NuxtLink> </div> </template> ``` This example shows how to define the error prop with proper TypeScript typing and access error properties in the template.

createError with custom data example

Example of creating an error with custom fields using createError: ```ts throw createError({ status: 404, statusText: 'Page Not Found', data: { myCustomField: true, }, }) ``` This shows how to throw an error with a status code, status text, and custom data that will be preserved in the error object.

Give your agent this brain