Usage
The Error component renders a <main> element that works together with the SidebarLayout 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.
404
Page not found
The page you are looking for does not exist.
<template>
<B24Error
:error="{
statusCode: 404,
statusMessage: 'Page not found',
message: 'The page you are looking for does not exist.'
}"
/>
</template>
Icon Soon
Use the icon prop to display an icon above the status code.
404
Page not found
The page you are looking for does not exist.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Error
:icon="RocketIcon"
:error="{
statusCode: 404,
statusMessage: 'Page not found',
message: 'The page you are looking for does not exist.'
}"
/>
</template>
Avatar Soon
Use the avatar prop to display an Avatar above the status code (used only when icon is not set).
404
Page not found
The page you are looking for does not exist.
<template>
<B24Error
:avatar="{
src: 'https://github.com/bitrix24.png'
}"
:error="{
statusCode: 404,
statusMessage: 'Page not found',
message: 'The page you are looking for does not exist.'
}"
/>
</template>
Color Soon
Use the color prop to tint the inner Avatar. An explicit avatar.color overrides this default.
404
Page not found
The page you are looking for does not exist.
<template>
<B24Error
color="air-primary-alert"
:avatar="{
src: 'https://github.com/bitrix24.png'
}"
:error="{
statusCode: 404,
statusMessage: 'Page not found',
message: 'The page you are looking for does not exist.'
}"
/>
</template>
Use the #leading slot to display a custom element, such as a logo.
404
Page not found
The page you are looking for does not exist.
<template>
<B24Error
:error="{
statusCode: 404,
statusMessage: 'Page not found',
message: 'The page you are looking for does not exist.'
}"
>
<template #leading>
<img src="https://github.com/bitrix24.png" alt="Bitrix24" class="size-10 rounded-full" />
</template>
</B24Error>
</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.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Error
:clear="{
color: 'air-primary-alert',
size: 'xl',
icon: RocketIcon,
class: '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>
<B24Error
redirect="/docs/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:
<script setup lang="ts">
import type { NuxtError } from '#app'
const props = defineProps<{
error: NuxtError
}>()
</script>
<template>
<B24App>
<B24SidebarLayout :use-light-content="false">
<B24Error :error="error" />
</B24SidebarLayout>
</B24App>
</template>
app.vue inside your error.vue file to have the same layout and features, here is an example: https://github.com/bitrix24/b24ui/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, () => queryContent(route.path).findOne())
if (!page.value) {
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>
API
Props
Slots
Theme
export default {
slots: {
root: 'min-h-[calc(100vh-var(--topbar-height))] flex flex-col items-center justify-center text-center',
leading: 'mb-4 flex items-center justify-center',
leadingIcon: 'size-10 shrink-0 text-legend',
leadingAvatar: 'shrink-0',
leadingAvatarSize: 'lg',
statusCode: 'text-(length:--ui-font-size-sm) font-(--ui-font-weight-semi-bold) text-legend',
statusMessage: 'mt-2 text-(length:--ui-font-size-4xl)/(--ui-font-line-height-md) sm:text-(length:--ui-font-size-5xl)/(--ui-font-line-height-md) font-(--ui-font-weight-bold) text-label text-balance',
message: 'mt-4 text-(length:--ui-font-size-2xl)/(--ui-font-line-height-md) text-description text-balance',
links: 'mt-8 flex items-center justify-center gap-6'
}
}