Error

GitLab
Um componente de erro pronto para uso com suporte ao NuxtError.

Uso

O componente Error renderiza um elemento <main> que funciona em conjunto com o componente Header para criar um layout de altura total que se estende até a altura disponível da viewport.

O componente Error usa a variável CSS --ui-header-height para se posicionar corretamente abaixo do Header.

Erro

Use a prop error para exibir uma mensagem de erro.

Na maioria dos casos, você receberá a prop error no seu arquivo error.vue.

404

Page not found

The page you are looking for does not exist.

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

Ícone 4.8+

Use a prop icon para exibir um ícone acima do código de status.

404

Page not found

The page you are looking for does not exist.

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

Use o slot #leading para exibir um elemento personalizado, como um logo.

404

Page not found

The page you are looking for does not exist.

<template>
  <NError
    :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>
  </NError>
</template>

Limpar

Use a prop clear para personalizar ou ocultar o botão de limpar (com o valor false).

Você pode passar qualquer propriedade do componente Button para personalizá-lo.

404

Page not found

The page you are looking for does not exist.

<template>
  <NError
    :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>

Redirecionamento

Use a prop redirect para redirecionar o usuário para uma página diferente quando o botão de limpar é clicado. O padrão é /.

404

Page not found

The page you are looking for does not exist.

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

Exemplos

Dentro de error.vue

Use o componente Error no seu error.vue:

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

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

<template>
  <NApp>
    <NHeader />

    <NError :error="error" />

    <NFooter />
  </NApp>
</template>
Você pode querer replicar o código do seu app.vue dentro do seu arquivo error.vue para ter o mesmo layout e recursos; aqui está um exemplo: https://gitlab.nitro.news/nitro/ui/-/blob/main/docs/app/error.vue
Você pode ler mais sobre como tratar erros na documentação do Nuxt, mas ao usar nuxt generate é recomendado adicionar fatal: true dentro da sua chamada de createError para garantir que a página de erro seja exibida:
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'div'any

The element or component this component should render as.

error Partial<NuxtError<unknown> & { message: string; }>
redirect'/' string

The URL to redirect to when the error is cleared.

cleartrueboolean | 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; statusCode?: SlotClass; statusMessage?: SlotClass; message?: SlotClass; links?: SlotClass; }

Slots

Slot Type
default{}
statusCode{}
statusMessage{}
message{}
links{}

Tema

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',
        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 '@nitro/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',
            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

Um container permite centralizar e limitar a largura do seu conteúdo.

Footer

Um componente de footer responsivo.