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 is a minimal v-main wrapper around <NuxtPage />.

Not used by the error page any more. Until ee26b58, app/error.vue called setPageLayout('error-layout') on the client. It now renders either the error-auth layout (authenticated, branded route, status not 401) or a bare div.main, and nothing on origin/development references error-layout. The file is still present in app/layouts/. See Error Component and the error-auth entry in Layouts.

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 ​

Adds the default Collage favicon only when useCollageBranding().showCollageBranding is true; otherwise no icon link is added:

typescript
import defaultFavicon from "~/assets/img/favicon.svg";

const { showCollageBranding } = useCollageBranding();

useHead({
  link: computed(() => {
    if (!showCollageBranding.value) return [];
    return [
      { rel: "icon", type: "image/svg+xml", href: defaultFavicon, key: "default-favicon" },
    ];
  }),
})

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.