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.

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

error.statusCode

error.statusMessage

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>

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 /.

redirect

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:

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>

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/bitrix24/b24ui/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, () => queryContent(route.path).findOne())
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.
`clear`	`true`	`boolean \| ButtonProps` Display a button to clear the error in the links slot. `{ size: 'lg', color: 'air-primary', label: 'Back to home' }`
`b24ui`		`{ root?: ClassNameValue; statusCode?: ClassNameValue; statusMessage?: ClassNameValue; message?: ClassNameValue; links?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{}`
`statusCode`	`{}`
`statusMessage`	`{}`
`message`	`{}`
`links`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    error: {
      slots: {
        root: 'min-h-[calc(100vh-var(--topbar-height))] flex flex-col items-center justify-center text-center',
        statusCode: 'text-(length:--ui-font-size-sm) font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-legend-color)',
        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-(--b24ui-typography-label-color) text-balance',
        message: 'mt-4 text-(length:--ui-font-size-2xl)/(--ui-font-line-height-md) text-(--b24ui-typography-description-color) text-balance',
        links: 'mt-8 flex items-center justify-center gap-6'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        error: {
          slots: {
            root: 'min-h-[calc(100vh-var(--topbar-height))] flex flex-col items-center justify-center text-center',
            statusCode: 'text-(length:--ui-font-size-sm) font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-legend-color)',
            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-(--b24ui-typography-label-color) text-balance',
            message: 'mt-4 text-(length:--ui-font-size-2xl)/(--ui-font-line-height-md) text-(--b24ui-typography-description-color) text-balance',
            links: 'mt-8 flex items-center justify-center gap-6'
          }
        }
      }
    })
  ]
})

Container

A box for centering and setting a maximum width for your content.

Footer

A responsive footer for displaying copyright, links, and additional information.