ErrorPRO
Usage
Like theMain component, the Error component renders a<main> element that works together with theHeader component to create a full-height layout that extends to the viewport's available height.
--ui-header-height CSS variable, which you can customize by overriding it in your CSS::root { --ui-header-height: --spacing(16);}Error
Use theerror prop to display an error message.
404
Page not found
The page you are looking for does not exist.
<template> <UError :error="{ statusCode: 404, statusMessage: 'Page not found', message: 'The page you are looking for does not exist.' }" /></template>Clear
Use theclear prop to customize or hide the clear button (withfalse value).
You can pass any property from theButton component to customize it.
404
Page not found
The page you are looking for does not exist.
<template> <UError :clear="{ color: 'neutral', size: 'xl', icon: 'i-lucide-arrow-left', class: 'rounded-full' }" :error="{ statusCode: 404, statusMessage: 'Page not found', message: 'The page you are looking for does not exist.' }" /></template>Redirect
Use theredirect prop to redirect the user to a different page when the clear button is clicked. Defaults to/.
404
Page not found
The page you are looking for does not exist.
<template> <UError redirect="/getting-started" :error="{ statusCode: 404, statusMessage: 'Page not found', message: 'The page you are looking for does not exist.' }" /></template>Examples
Withinerror.vue
Use the Error component in yourerror.vue:
<script setup lang="ts">import type { NuxtError } from '#app'const props= defineProps<{ error: NuxtError}>()</script><template> <UApp> <UHeader /> <UError :error="error" /> <UFooter /> </UApp></template>app.vue inside yourerror.vue file to have the same layout and features, here is an example:https://github.com/nuxt/ui/blob/v3/docs/app/error.vuenuxt generate it is recommended to addfatal: true inside yourcreateError call to make sure the error page is displayed:<script setup lang="ts">const route= useRoute()const { data: page} = await useAsyncData(route.path, () => queryContent(route.path).findOne())if (!page.value){ throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })}</script>API
Props
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
error |
| |
redirect |
|
The URL to redirect to when the error is cleared. |
clear |
|
Display a button to clear the error in the links slot. |
ui |
|
Slots
| Slot | Type |
|---|---|
default |
|
statusCode |
|
statusMessage |
|
message |
|
links |
|
Theme
export default defineAppConfig({ uiPro: { error: { slots: { root: 'min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center', statusCode: 'text-base font-semibold text-primary', statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance', message: 'mt-4 text-lg text-muted text-balance', links: 'mt-8 flex items-center justify-center gap-6' } } }})import { defineConfig } from 'vite'import vuefrom '@vitejs/plugin-vue'import uifrom '@nuxt/ui/vite'export default defineConfig({ plugins: [ vue(), ui({ uiPro: { error: { slots: { root: 'min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center', statusCode: 'text-base font-semibold text-primary', statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance', message: 'mt-4 text-lg text-muted text-balance', links: 'mt-8 flex items-center justify-center gap-6' } } } }) ]})import { defineConfig } from 'vite'import vuefrom '@vitejs/plugin-vue'import uiProfrom '@nuxt/ui-pro/vite'export default defineConfig({ plugins: [ vue(), uiPro({ uiPro: { error: { slots: { root: 'min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center', statusCode: 'text-base font-semibold text-primary', statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-highlighted text-balance', message: 'mt-4 text-lg text-muted text-balance', links: 'mt-8 flex items-center justify-center gap-6' } } } }) ]})