---
url: "https://vueda.dev/v3/reference/api/js/use/useDetailView.md"
title: "use/useDetailView"
---

# use/useDetailView

## Overview

Provides all reactive state and behaviour for a detail view that fetches and
displays a single model instance. Handles object fetching, title computation,
action and transition availability, error combination, and populating a form
initial-values object from the fetched data.

Used directly by `DetailView.vue` and intended as a building block for custom
detail-view shells in consuming projects.

## Examples

```vue
<script setup>
import { useDetailView } from "@vueda/use/useDetailView.js";
import { useForm } from "@vueda/use/useForm.js";
import { useObjectForm } from "@vueda/use/useObjectForm.js";
import { reactive, toRef } from "vue";

const props = defineProps({ app: String, model: String, pk: String });
const formContextProps = reactive({ initialValues: {} });
useForm(formContextProps);
const { modelConfig, instance, actions } = useDetailView(props, formContextProps.initialValues);
</script>
```

```js
import { usePageTitle } from "@vueda/use/usePageTitle.js";

// The layout's PageTitle shows a skeleton while the title is empty.
usePageTitle(() => ({ title: instance.titleStr, loading: instance.pageLoading }));
```

```html
<template v-for="actionName in actions.nonDetailActions" :key="actionName">
    <link-model-view :app="app" :model="model" :view="actionName" />
</template>
<template v-for="actionName in actions.detailActions" :key="actionName">
    <link-model-view :app="app" :model="model" :pk="pk" :view="actionName" button />
</template>
<template v-for="transition in actions.availableTransitions" :key="transition">
    <link-model-view :app="app" :model="model" :pk="pk" :view="transition" button />
</template>
```

```html
<error-display
    :error="instance.combinedError"
    :errored="instance.combinedErrored"
    :while-text="instance.combinedWhileText"
/>
<form :id="instance.formId" @submit.prevent="objectForm.submit">
    <form-model v-bind="instance.combinedFormProps" />
</form>
<!-- Required: resolves submit-time warning confirmations (HTTP 409); without it warned saves are cancelled. -->
<form-confirm-dialog :controller="objectForm.confirmation" />
```

## Methods

- [useDetailView](/v3/reference/api/js/use/useDetailView/functions/useDetailView.md) - Extracts all reactive state and wiring for a detail view of a single model instance.

## Types

### [DetailViewActionsGroup](/v3/reference/api/js/use/useDetailView/types/DetailViewActionsGroup.md)

### [DetailViewContext](/v3/reference/api/js/use/useDetailView/types/DetailViewContext.md)

### [DetailViewInstanceGroup](/v3/reference/api/js/use/useDetailView/types/DetailViewInstanceGroup.md)

### [DetailViewOptions](/v3/reference/api/js/use/useDetailView/types/DetailViewOptions.md)

Required identification.

## Source

`client/lib/use/useDetailView.js:1`