---
url: "https://vueda.dev/v3/reference/theming/keys/ViewUpdate.md"
title: "ViewUpdate"
---

# ViewUpdate

Source: `client/lib/theme/vueda-tailwind/views/index.js`

> Outer wrapper. Layout-only; PageTitle, the StickyBar, and the form body below own the visible chrome, so this stays empty by default. The `class` prop merges here.

Vue component: [ViewUpdate](/v3/reference/api/vue/ViewUpdate.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/ViewUpdate.md#theme-key-ViewUpdate-root) |  | Outer wrapper. Layout-only; PageTitle, the StickyBar, and the form body below own the visible chrome, so this stays empty by default. The `class` prop merges here. |
| [body](/v3/reference/theming/keys/ViewUpdate.md#theme-key-ViewUpdate-body) | `px-5 py-5` | Form body region wrapping the error display and the generated form. `px-5 py-5` sets the content gutter; the horizontal `px-5` aligns the form's left edge with the [StickyBar](/v3/reference/theming/keys/StickyBar.md) controls and [PageTitle](/v3/reference/theming/keys/PageTitle.md) title above it so the page chrome reads as a continuous column. Merge extra classes here via `themeOverride` (or `setTheme`). |
| [recordName](/v3/reference/theming/keys/ViewUpdate.md#theme-key-ViewUpdate-recordName) | `mb-4 text-lg font-semibold leading-tight break-words` | Heading at the top of the body that names the record by its formatted name, above the form. It scrolls with the body rather than sticking with the page title, so a long name wraps instead of growing the sticky header. |
| [recordNameSkeleton](/v3/reference/theming/keys/ViewUpdate.md#theme-key-ViewUpdate-recordNameSkeleton) | `mb-4 h-[22px] w-64 max-w-full` | Placeholder shown in place of [ViewUpdate.recordName](/v3/reference/theming/keys/ViewUpdate.md#theme-key-ViewUpdate-recordName) while the record is loading. Sized to one line of the heading. |

<a id="theme-key-ViewUpdate-root"></a>

## root

> Outer wrapper. Layout-only; PageTitle, the StickyBar, and the form body below own the visible chrome, so this stays empty by default. The `class` prop merges here.

Source: `client/lib/theme/vueda-tailwind/views/ViewUpdate.theme.js:18`

<a id="theme-key-ViewUpdate-body"></a>

## body

> Form body region wrapping the error display and the generated form. `px-5 py-5` sets the content gutter; the horizontal `px-5` aligns the form's left edge with the [StickyBar](/v3/reference/theming/keys/StickyBar.md) controls and [PageTitle](/v3/reference/theming/keys/PageTitle.md) title above it so the page chrome reads as a continuous column. Merge extra classes here via `themeOverride` (or `setTheme`).

Default classes:

`px-5 py-5`

Source: `client/lib/theme/vueda-tailwind/views/ViewUpdate.theme.js:22`

<a id="theme-key-ViewUpdate-recordName"></a>

## recordName

> Heading at the top of the body that names the record by its formatted name, above the form. It scrolls with the body rather than sticking with the page title, so a long name wraps instead of growing the sticky header.

Default classes:

`mb-4 text-lg font-semibold leading-tight break-words`

Source: `client/lib/theme/vueda-tailwind/views/ViewUpdate.theme.js:26`

<a id="theme-key-ViewUpdate-recordNameSkeleton"></a>

## recordNameSkeleton

> Placeholder shown in place of [ViewUpdate.recordName](/v3/reference/theming/keys/ViewUpdate.md#theme-key-ViewUpdate-recordName) while the record is loading. Sized to one line of the heading.

Default classes:

`mb-4 h-[22px] w-64 max-w-full`

Source: `client/lib/theme/vueda-tailwind/views/ViewUpdate.theme.js:30`