---
url: "https://vueda.dev/v3/reference/api/vue/DetailView.md"
title: "DetailView"
---

# DetailView

## Overview

Renders a full detail page for a single model instance, including a page title, a sticky
action bar with available object actions and workflow transitions, and a FormModel that
displays or edits the object's fields. Fetches the object from the API automatically using
the provided app, model, and pk props.

Theme entry: [DetailView](/v3/reference/theming/keys/DetailView.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-app">app</span> | `string` | yes |  | Django app label that owns the model. |
| <span id="prop-model">model</span> | `string` | yes |  | Django model name identifying which object type to fetch and display. |
| <span id="prop-viewName">viewName</span> | `string` | yes |  | View identifier used to load the model config and construct the form ID. |
| <span id="prop-pk">pk</span> | `string` | yes |  | Primary key of the object instance to fetch and render. |
| <span id="prop-objectForm">objectForm</span> | `object` |  | `undefined` | Form state object returned by `useObjectForm`, used to track submission state and trigger submit. |
| <span id="prop-variant">variant</span> | `string` |  | `"default"` | Theme variant applied to the root element. |
| <span id="prop-formModelVariant">formModelVariant</span> | `string` |  | `undefined` | Theme variant that the inner FormModel component receives as `variant`. Wins over a `variant` in the model config's `formProps` when passed. |
| <span id="prop-class">class</span> | `string\|array\|object` |  | `() => []` | CSS class(es) applied to the outermost root element. |
| <span id="prop-fields">fields</span> | `array` |  | `undefined` | Field names to render in the form; overrides the model config default. |
| <span id="prop-fieldDetails">fieldDetails</span> | `object` |  | `undefined` | Map of field paths to field detail overrides. |
| <span id="prop-expand">expand</span> | `array` |  | `undefined` | Field names to render in expanded (inline) mode. |
| <span id="prop-expandDetails">expandDetails</span> | `object` |  | `undefined` | Map of expand field paths to detail overrides. |
| <span id="prop-fieldComponents">fieldComponents</span> | `object` |  | `undefined` | Map of field paths to async functions returning an override field component. |
| <span id="prop-widgetComponents">widgetComponents</span> | `object` |  | `undefined` | Map of field paths to async functions returning an override widget component. |
| <span id="prop-formProps">formProps</span> | `object` |  | `undefined` | Extra props for the inner FormModel component. They win over the model config's `formProps` and lose to this view's own form props. The `app`, `model`, and `view` keys are ignored, because the view sets them. |
| <span id="prop-fieldProps">fieldProps</span> | `object` |  | `undefined` | Map of field paths to additional props passed to the field component. Replaces a `fieldProps` map in the model config's `formProps` when passed. |
| <span id="prop-widgetProps">widgetProps</span> | `object` |  | `undefined` | Map of field paths to additional props passed to the widget component. Replaces a `widgetProps` map in the model config's `formProps` when passed. |
| <span id="prop-relatedObjectRules">relatedObjectRules</span> | `object` |  | `{}` | Rules mapping related object keys to fetch data alongside the main object. |
| <span id="prop-calculatedObjectRules">calculatedObjectRules</span> | `object` |  | `{}` | Rules mapping calculated object keys to derive computed data alongside the main object. |
| <span id="prop-fetchFields">fetchFields</span> | `array` |  | `undefined` | Field names to request from the API when fetching the object; overrides the model config default. |
| <span id="prop-submitFields">submitFields</span> | `array` |  | `undefined` | Field names to include when submitting the form; overrides the model config default. |
| <span id="prop-primaryActions">primaryActions</span> | `array` |  | `undefined` | Action names promoted to the filled hero CTA in the action bar; defaults to the `update` action. |

## Slots

| Name | Scoped | Description |
| --- | --- | --- |
| `targetless-action-button` | yes |  |
| `extra-buttons` |  | Additional action buttons appended in the page title action area. |
| `submit-button` | yes | Override the submit button shown in the sticky action bar for update views. |
| `action-button` | yes | Override an individual action link button in the sticky bar. |
| `transition-button` | yes | Override an individual workflow transition button in the sticky bar. |
| `record-name` | yes | Override the heading that names the record above the form; receives `recordName` (the fetched object's formatted name, empty when there is none) and `pending` (true while the name is loading). |

[Full slot reference](/v3/reference/api/vue/DetailView/slots.md)

## Events

| Name | Description |
| --- | --- |
| `object` |  |
| `loading` |  |
| `related-object` |  |
| `calculated-object` |  |
| `form-object` |  |
| `form-context` |  |

[Full event reference](/v3/reference/api/vue/DetailView/events.md)

## Source

`client/lib/views/DetailView.vue`