Error

GitHub
A pre-built error component with NuxtError support.

Usage

The Error component works together with the Header component to create a full-height layout that extends to the viewport's available height.

Error

Use the error prop to display an error message.

In most cases, you will receive the error prop in your error.vue file.

404

Page not found

The page you are looking for does not exist.

<template>
  <PError
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</template>

Clear

Use the clear prop to customize or hide the clear button (with false value).

You can pass any property from the Button component to customize it.

404

Page not found

The page you are looking for does not exist.

<template>
  <PError
    :clear="{
      color: 'neutral',
      size: 'xl',
      icon: 'i-lucide:arrow-left',
      class: 'akar:rounded-full'
    }"
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</template>

Redirect

Use the redirect 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>
  <PError
    redirect="/docs/pohon/getting-started"
    :error="{
      statusCode: 404,
      statusMessage: 'Page not found',
      message: 'The page you are looking for does not exist.'
    }"
  />
</template>

Examples

Within error.vue

Use the Error component in your error.vue:

error.vue
<script setup lang="ts">
import type { NuxtError } from '#app';

const props = defineProps<{
  error: NuxtError;
}>();
</script>

<template>
  <PApp>
    <PHeader />

    <PError :error="error" />

    <PFooter />
  </PApp>
</template>
You might want to replicate the code of your app.vue inside your error.vue file to have the same layout and features, here is an example: https://github.com/vinicunca/akar/blob/main/docs/app/error.vue
You can read more about how to handle errors in the Nuxt documentation, but when using nuxt generate it is recommended to add fatal: true inside your createError call to make sure the error page is displayed:
pages/[...slug].vue
<script setup lang="ts">
const route = useRoute();

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first();
});
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
}
</script>

API

Props

Prop Default Type
as'main'any

The element or component this component should render as.

error Partial<NuxtError<unknown> & { message: string; }>
redirect'/' string

The URL to redirect to when the error is cleared.

cleartrueboolean | Omit<PButtonProps, PLinkPropsKeys>

Display a button to clear the error in the links slot. { size: 'lg', color: 'primary', variant: 'solid', label: 'Back to home' }

pohon { root?: ClassValue; statusCode?: ClassValue; statusMessage?: ClassValue; message?: ClassValue; links?: ClassValue; }

Slots

Slot Type
defaultobject
statusCodeobject
statusMessageobject
messageobject
linksobject

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PError. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts
export default defineAppConfig({
  pohon: {
    error: {
      slots: {
        root: '',
        statusCode: '',
        statusMessage: '',
        message: '',
        links: ''
      }
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    error: {
      slots: {
        root: '',
        statusCode: '',
        statusMessage: '',
        message: '',
        links: ''
      }
    }
  }
};

Changelog

No recent changes

Container

A container lets you center and constrain the width of your content.

Footer

A responsive footer component.