404
Page not found
The page you are looking for does not exist.
The Error component works together with the Header component to create a full-height layout that extends to the viewport's available height.
Use the error prop to display an error message.
404
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>
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
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>
Use the redirect prop to redirect the user to a different page when the clear button is clicked. Defaults to /.
404
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>
error.vueUse the Error component in your 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>
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.vuenuxt generate it is recommended to add fatal: true inside your createError call to make sure the error page is displayed:<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>
| Prop | Default | Type |
|---|
| Slot | Type |
|---|
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.
export default defineAppConfig({
pohon: {
error: {
slots: {
root: '',
statusCode: '',
statusMessage: '',
message: '',
links: ''
}
}
}
};
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: ''
}
}
}
};