Error

Un componente de error preconstruido con soporte para NuxtError.

Utilisation

Le composant Error affiche un élément <main> qui fonctionne avec le composant Header pour créer une disposition pleine hauteur qui s'étend à la hauteur disponible de la fenêtre d'affichage.

Le composant Error utilise la variable CSS --ui-header-height pour se positionner correctement en dessous de la variable Header.

Erreur

Utilisez le prop error pour afficher un message d'erreur.

Dans la plupart des cas, vous recevrez le prop error dans votre fichier 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>

Icône: badge{label="4.8+" class="align-text-top"}

Utilisez le prop icon pour afficher une icône au-dessus du code d'état.

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>

Utilisez le slot #leading pour afficher un élément personnalisé, tel qu 'un logo.

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

Utilisez la prop clear pour personnaliser ou masquer le bouton effacer (avec la valeur false).

Vous pouvez passer n'importe quelle propriété du composant Button pour le personnaliser.

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>

Redirect

Utilisez la prop redirect pour rediriger l'utilisateur vers une page différente lorsque le bouton effacer est cliqué.

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>

exemples

Dans `error.vue`

Utilisez le composant d'erreur dans votre 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>

Vous voudrez peut-être répliquer le code de votre app.vue dans votre fichier error.vue pour avoir la même disposition et les mêmes fonctionnalités, voici un exemple: https://github.com/nuxt/ui/blob/v4/docs/app/error.vue

Vous pouvez en savoir plus sur la façon de gérer les erreurs dans la documentation Nuxt , mais lorsque vous utilisez nuxt generate, il est recommandé d'ajouter fatal: true à l'intérieur de votre appel createError pour vous assurer que la page d'erreur est affichée:

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

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`	`{}`

Thème

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

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.