error.vue

O arquivo error.vue é a página de erro em sua aplicação Nuxt.

Durante a vida útil da sua aplicação, alguns erros podem aparecer inesperadamente em tempo de execução. Nesse caso, podemos usar o arquivo error.vue para substituir os arquivos de erro padrão e exibir o erro de forma agradável.

error.vue

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

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

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <NuxtLink to="/">Voltar para a página inicial</NuxtLink>
  </div>
</template>

Embora seja chamada de 'página de erro', não é uma rota e não deve ser colocada no diretório ~/pages. Pelo mesmo motivo, você não deve usar definePageMeta dentro desta página. Dito isso, você ainda pode usar layouts no arquivo de erro, utilizando o componente NuxtLayout e especificando o nome do layout.

A página de erro tem uma única prop - error, que contém um erro para você lidar.

O objeto error fornece os seguintes campos:

{
  statusCode: number
  fatal: boolean
  unhandled: boolean
  statusMessage?: string
  data?: unknown
  cause?: unknown
}

Se você tiver um erro com campos personalizados, eles serão perdidos; você deve atribuí-los a data em vez disso:

throw createError({
  statusCode: 404,
  statusMessage: 'Page Not Found',
  data: {
    myCustomField: true
  }
})

※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.

A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/guide/directory-structure/error