Component

Props

Slots

When using the slots, you can customize different parts of the ErrorDisplay component to better fit your application's design and requirements. It will replace the default content for each respective section and ignore the related props.

 <template>
    <ErrorDisplay 
        :statusCode="error?.statusCode ?? -1" 
    >
        <template #visual-top>
            <!-- Custom visual content -->
        </template>

        <template #visual-left>
            <!-- Custom visual content -->
        </template>

        <template #visual-right>
            <!-- Custom visual content -->
        </template>

        <template #description>
            <!-- Custom description content -->
        </template>

        <template #actions>
            <!-- Custom action buttons or links -->
        </template>
    </ErrorDisplay>
</template>

<script setup lang="ts">
const error = useError()
</script>
 

Nuxt error page

The error.vue page, which is created in the root of the Nuxt project, can contain the ErrorDisplay component to show error messages based on the HTTP status code.

 <template>
    <ErrorDisplay :statusCode="error?.statusCode ?? -1" />
</template>

<script setup lang="ts">
const error = useError()
</script>
 

Error mappings can also be customized by passing the errorMappings prop to the ErrorDisplay component.

Usage

statusCode

Sets the HTTP status code for the error display. This code is used to determine the appropriate error message and title to show.

 <template>
    <ErrorDisplay :statusCode="404" />
</template>
 

• Type: number
• Required: true

errorMappings

The errorMappings prop allows you to provide custom mappings for different HTTP status codes. Each mapping should include a statusCode, title, description, and optionally an icon.

Provided mappings will override the matching default mappings. The rest of the default mappings will still be available.

 <template>
    <ErrorDisplay :errorMappings="customErrorMappings" />
</template>
<script setup lang="ts">
const customErrorMappings: ErrorMapping[] = [
    {
        statusCode: 404,
        title: 'Page Not Found',
        description: 'The page you are looking for does not exist.',
        icon: 'mdi:alert-circle-outline',
    },
    {
        statusCode: 500,
        title: 'Internal Server Error',
        description: 'Something went wrong on our end. Please try again later.',
        icon: 'mdi:server',
    },
]
</script>
 

TypeScript type

 type ErrorMapping = {
    statusCode: number
    title: string
    message: string
    icon?: string
}
 

showIcon

Determines whether to display the error icon in the error display component.

 <template>
    <ErrorDisplay :showIcon="false" />
</template>
 

• Type: boolean
• Default: true

setPageTitle

When set to true, the component will update the page title to reflect the error status code and title.

 <template>
    <ErrorDisplay setPageTitle />
</template>
 

• Type: boolean
• Default: true

showErrorCode

Controls the visibility of the error code in the error display.

 <template>
    <ErrorDisplay :showErrorCode="false" />
</template>
 

• Type: boolean
• Default: true

icon

Specifies the icon to be displayed in the error display component. It will be replaced if is a custom icon provided through the errorMappings prop.

 <template>
    <ErrorDisplay icon="mdi:alert-octagon-outline" />
</template>
 

• Type: string
• Default: 'mdi:alert-circle-outline'

backToHomeText

The backToHomeText prop allows you to customize the text displayed on the button that navigates back to the home page.

 <template>
    <ErrorDisplay backToHomeText="Return to Homepage" />
</template>
 

• Type: string
• Default: 'Back to home page'

backToHomeIcon

The backToHomeIcon prop allows you to set a custom icon for the button that navigates back to the home page.

 <template>
    <ErrorDisplay backToHomeIcon="mdi:arrow-left-circle-outline" />
</template>
 

• Type: string
• Default: 'mdi:home-outline'

homeRoute

The homeRoute prop specifies the route to which the user will be redirected when they click the "Back to home page" button.

     <ErrorDisplay homeRoute="/dashboard" />
</template>
 

• Type: string
• Default: '/'

isFullScreen

When set to true, the error display will occupy the full height of the viewport, providing a more immersive experience.

 <template>
    <ErrorDisplay isFullScreen />
</template>
 

• Type: boolean
• Default: true

orientation

The orientation prop allows you to set the layout orientation of the error display content. It uses the Orientation enum.

 
<template>
    <ErrorDisplay :orientation="Orientation.HORIZONTAL" />
</template>
 

• Type: Orientation
• Default: Orientation.VERTICAL

Options

alignContent

The alignContent prop allows you to set the alignment of the content within the error display. It uses the Align enum.

 <template>
    <ErrorDisplay :alignContent="Align.LEFT" />
</template>
 

• Type: Align
• Default: Align.CENTER

Options

isMobileCentered

When set to true, the content of the error display will be centered on mobile devices for better readability.

 <template>
    <ErrorDisplay :isMobileCentered="false" />
</template>
 

• Type: boolean
• Default: true