---
metaTitle: LayoutError component | AwesCode UI
meta:
  - name: description
    content: The <AwLayoutError /> is an error page layout for displaying error states (403, 404, 500) for AwesCode UI.
title: LayoutError
---

# AwLayoutError

**Category:** Layout | **Import:** Dynamic

The `AwLayoutError` component is a dedicated error page layout for displaying error states such as 403 Forbidden, 404 Not Found, and 500 Server Error. It provides a clean, centered error display with custom graphics for different error types.

## Overview

`AwLayoutError` provides an error page layout with:
- Custom SVG illustrations for 403 and 404 errors
- Error status code display
- Translated error messages
- Close button to return to homepage
- Back button to return to homepage
- Dark theme support
- Responsive design
- No navigation or header (standalone error page)

## Usage

### Basic Example

```markup
<AwLayoutError :error="error" />
```

### In Nuxt Error Page

```markup
<template>
  <AwLayoutError :error="error" />
</template>

<script>
export default {
  layout: 'empty', // or no layout
  props: {
    error: {
      type: Object,
      default: null
    }
  }
}
</script>
```

### With Custom Error Object

```markup
<AwLayoutError
  :error="{
    statusCode: 404,
    message: 'The page you are looking for does not exist'
  }"
/>
```

### Different Error Codes

```markup
<!-- 403 Forbidden -->
<AwLayoutError :error="{ statusCode: 403 }" />

<!-- 404 Not Found -->
<AwLayoutError :error="{ statusCode: 404 }" />

<!-- 500 Server Error -->
<AwLayoutError :error="{ statusCode: 500, message: 'Internal server error' }" />
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| error | Error object with statusCode and message | `Object` | `false` | `null` |

**Error Object Structure:**
```javascript
{
  statusCode: 403 | 404 | 500, // Error status code
  message: String              // Custom error message
}
```

### Slots

This component does not have slots.

### Events

This component does not emit custom events.

## Error Types

### 403 Forbidden

Shows a lock/security icon and displays:
- Translated title from `error_status_403_title`
- Translated description from `error_status_403_description`
- Error code message

### 404 Not Found

Shows a search/magnifying glass icon and displays:
- Translated title from `error_status_404_title`
- Translated description from `error_status_404_description`
- Error code message

### Other Errors (500, etc.)

Shows generic error display:
- Error code message
- Custom message from error object or "Something is wrong."

## Translation Keys

The component uses the following translation keys:
- `error_status__code` - "Error {code}"
- `error_status_403_title` - Title for 403 errors
- `error_status_403_description` - Description for 403 errors
- `error_status_404_title` - Title for 404 errors
- `error_status_404_description` - Description for 404 errors
- `Back` - Back button text

## Related Components

- `AwLayout` - Default layout with navigation
- `AwLayoutCenter` - Centered layout for auth pages
- `AwButton` - Used for close and back buttons

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as a layout
- Different SVG illustrations for 403 (security) and 404 (not found) errors
- Close button in top-right corner returns to homepage (href="/")
- Back button at bottom returns to homepage (href="/")
- Status code defaults to 500 if not provided
- Custom error messages can be provided via error.message
- Uses CSS custom properties for theming (`--c-mono-900`, `--c-on-surface`)
- Fully responsive with mobile-first design
- Back button is full-width on mobile, auto-width on desktop
- No sidebar or header navigation (standalone error page)
- Suitable for Nuxt error.vue layouts