Error

Un componente de error preconstruido con soporte para NuxtError.

xph0000xUso

El componente Error representa un elemento <main> que trabaja junto con el componente Header para crear un diseño de altura completa que se extiende a la altura disponible de la ventana gráfica.

El componente Error utiliza la variable CSS --ui-header-height para posicionarse correctamente debajo del Header.

Error (Edición española)

Utilice el prop error para mostrar un mensaje de error.

En la mayoría de los casos, recibirá el prop error en su archivo error.vue.

error.statusCode

error.statusMessage

error.message

404

Page not found

The page you are looking for does not exist.

<template>
  <UError
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</template>

Icono: badge{label="4.8+" class="align-text-top"}

Utilice el prop icon para mostrar un icono sobre el código de estado.

icon

404

Page not found

The page you are looking for does not exist.

<template>
  <UError
    icon="i-lucide-file-x"
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</template>

Utilice la ranura #leading para mostrar un elemento personalizado, como un logotipo.

404

Page not found

The page you are looking for does not exist.

<template>
  <UError
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  >
    <template #leading>
      <img src="https://github.com/nuxt.png" alt="Logo" class="size-10 rounded-full" />
    </template>
  </UError>
</template>

Clear (en inglés)

Utilice el accesorio clear para personalizar u ocultar el botón borrar (con el valor false).

Puede pasar cualquier propiedad del componente Button para personalizarlo.

404

Page not found

The page you are looking for does not exist.

<template>
  <UError
    :clear="{
      color: 'neutral',
      size: 'xl',
      icon: 'i-lucide-arrow-left',
      class: 'rounded-full'
    }"
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</template>

Redirección

Utilice el prop redirect para redirigir al usuario a una página diferente cuando se hace clic en el botón borrar.

redirect

404

Page not found

The page you are looking for does not exist.

<template>
  <UError
    redirect="/docs/getting-started"
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</template>

Ejemplos

XPH113X en el XPH114X

Utilice el componente de error en su error.vue:

error.vue

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

const props = defineProps<{
  error: NuxtError
}>()
</script>

<template>
  <UApp>
    <UHeader />

    <UError :error="error" />

    <UFooter />
  </UApp>
</template>

Es posible que desee replicar el código de su app.vue dentro de su archivo error.vue para tener el mismo diseño y características, aquí hay un ejemplo: https://github.com/nuxt/ui/blob/v4/docs/app/error.vue

Puede obtener más información sobre cómo manejar los errores en la documentación Nuxt , pero al usar nuxt generate se recomienda agregar fatal: true dentro de su llamada createError para asegurarse de que se muestre la página de error:

pages/[...slug].vue

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>

API

Props (accesorios)

Prop	Default	Type
`as`	`'main'`	`any` The element or component this component should render as.
`icon`		`any` The icon displayed above the status code.
`error`		`Partial<NuxtError<unknown> & { message: string; }>`
`redirect`	`'/'`	`string` The URL to redirect to when the error is cleared.
`clear`	`true`	`boolean \| ButtonProps` Display a button to clear the error in the links slot. `{ size: 'lg', color: 'primary', variant: 'solid', label: 'Back to home' }`
`ui`		`{ root?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; statusCode?: SlotClass; statusMessage?: SlotClass; message?: SlotClass; links?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`
`leading`	`{ ui: object; }`
`statusCode`	`{}`
`statusMessage`	`{}`
`message`	`{}`
`links`	`{}`

Temas

app.config.ts

export default defineAppConfig({
  ui: {
    error: {
      slots: {
        root: 'min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center',
        leading: 'mb-4 flex items-center justify-center',
        leadingIcon: 'size-10 shrink-0 text-primary',
        statusCode: 'text-base font-semibold text-primary',
        statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance',
        message: 'mt-4 text-lg text-muted text-balance',
        links: 'mt-8 flex items-center justify-center gap-6'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        error: {
          slots: {
            root: 'min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center',
            leading: 'mb-4 flex items-center justify-center',
            leadingIcon: 'size-10 shrink-0 text-primary',
            statusCode: 'text-base font-semibold text-primary',
            statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance',
            message: 'mt-4 text-lg text-muted text-balance',
            links: 'mt-8 flex items-center justify-center gap-6'
          }
        }
      }
    })
  ]
})

Changelog (Edición española)

No recent changes

Container

A layout element to center and constrain the width of your content.

Footer

A responsive footer for your site links and legal notices.