Error Page

Creating a custom error page allows you to provide a better user experience when a page error occurs. To style your error page, you need to add a new file named error.vue at the root of your project:

<template>
  <NuxtLayout>
    <div class="container">
      <h1>{{ error.statusCode }}</h1>
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
import { H3Error } from 'h3'
const props = defineProps<{
  error: H3Error
}>()
</script>

This script creates a custom error page with a simple layout, displaying the HTTP error status code.

Display data from TYPO3 API

For the 404 error page, nuxt-typo3 attempts to fetch initialData and pageData fallback. If you have defined Error Handling for your TYPO3 website, you can display content from the TYPO3 API on your error page.

You can retrieve pageData and provide it to BackendLayout or T3Renderer like this:

<template>
  <NuxtLayout>
    <div class="container">
      <h1>{{ error.statusCode }}</h1>
    </div>
    <T3BackendLayout
      v-if="pageDataFallback"
      :name="pageDataFallback.appearance.backendLayout"
      :content="pageDataFallback.content"
    />
  </NuxtLayout>
</template>
<script setup lang="ts">
import { H3Error } from 'h3'
const props = defineProps<{
  error: H3Error
}>()

const { pageDataFallback, headData } = await useT3Page({
  fetchOnInit: false
})
</script>

In this script, useT3Page is called with fetchOnInit: false, meaning that the page data will not be fetched on initialization. Instead, pageData is directly provided to T3BackendLayout as a prop, where it will be used if it exists.