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.
<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.
<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/.
<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 |
|
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-(--ui-primary)', statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-(--ui-text-highlighted) text-balance', message: 'mt-4 text-lg text-(--ui-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-(--ui-primary)', statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-(--ui-text-highlighted) text-balance', message: 'mt-4 text-lg text-(--ui-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-(--ui-primary)', statusMessage: 'mt-2 text-4xl sm:text-5xl font-bold text-(--ui-text-highlighted) text-balance', message: 'mt-4 text-lg text-(--ui-text-muted) text-balance', links: 'mt-8 flex items-center justify-center gap-6' } } } }) ]})