Appearance

Error Layout ​

File Information ​

  • Path: app/layouts/error-layout.vue
  • Purpose: Layout for error pages (404, 500, etc.)
  • Used For: Error pages and error states

Overview ​

The error-layout provides a minimal layout specifically designed for error pages. It wraps page content in a Vuetify v-main component for proper styling and spacing.

Structure ​

vue
<template>
  <v-main>
    <NuxtPage />
  </v-main>
</template>

Features ​

Vuetify Integration ​

  • Uses v-main wrapper for proper Vuetify styling
  • Provides consistent spacing and padding
  • Works with Vuetify theme system

Minimal Structure ​

  • No header or sidebar
  • No navigation elements
  • Focus on error content
  • Clean, centered error display

SEO Configuration ​

Basic SEO setup with default favicon:

typescript
useHead({
  link: computed(() => [
    {
      rel: "icon",
      type: "image/svg+xml",
      href: "/favicon.svg",
    },
  ]),
})

Usage ​

In Error Page ​

vue
<script setup lang="ts">
definePageMeta({
  layout: 'error-layout'
})
</script>

<template>
  <div class="error-page">
    <h1>404</h1>
    <p>Page not found</p>
  </div>
</template>

Nuxt Error Pages ​

Nuxt automatically uses error layouts for error pages. You can create custom error pages:

vue
<!-- app/pages/[...slug].vue - Catch-all for 404 -->
<script setup lang="ts">
definePageMeta({
  layout: 'error-layout'
})
</script>

When to Use ​

Use the error layout for:

  • ✅ 404 error pages
  • ✅ 500 error pages
  • ✅ Other error states
  • ✅ Pages that need v-main wrapper without navigation

Styling ​

Uses Vuetify's v-main component which provides:

  • Proper padding and spacing
  • Theme-aware styling
  • Responsive behavior

Pages using this layout can add custom error styling.