Error

Een vooraf gebouwde foutcomponent met NuxtError-ondersteuning.

Gebruik

De Error-component geeft een <main>-element weer dat samenwerkt met de Header -component om een lay-out op volledige hoogte te creëren die zich uitstrekt tot de beschikbare hoogte van de viewport.

Het onderdeel Fout gebruikt de --ui-header-height CSS-variabele om zichzelf correct onder de Header te positioneren.

Fout

Gebruik de error prop om een foutmelding weer te geven.

In de meeste gevallen ontvangt u de error prop in uw error.vue bestand.

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>

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

Gebruik de icon prop om een pictogram boven de statuscode weer te geven.

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>

Gebruik de #leading-sleuf om een aangepast element weer te geven, zoals een 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>

Wissen

Gebruik de clear prop om de duidelijke knop aan te passen of te verbergen (met false-waarde).

U kunt elke eigenschap van de Button component doorgeven om deze aan te passen.

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>

Omleiden

Gebruik de redirect-prop om de gebruiker om te leiden naar een andere pagina wanneer op de duidelijke knop wordt geklikt. Standaard /.

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>

Voorbeelden

Binnen `error.vue`

Gebruik het onderdeel Fout in uw 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>

Misschien wilt u de code van uw app.vue in uw error.vue-bestand repliceren om dezelfde lay-out en functies te hebben, hier is een voorbeeld: https://github.com/nuxt/ui/blob/v4/docs/app/error.vue

U kunt meer lezen over hoe om te gaan met fouten in de Nuxt documentation, maar bij gebruik van nuxt generate is het raadzaam om fatal: true toe te voegen in uw createError-aanroep om er zeker van te zijn dat de fout pagina wordt weergegeven:

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

Thema

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'
          }
        }
      }
    })
  ]
})

Wijzigingsgelog

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.