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

# use/useViewCreate

## Overview

Provides all reactive state and behaviour for a create view that collects
field values from a form and submits a new model instance to the server.
Handles model configuration, initial value derivation, form context setup,
action availability, error combination, and submission handling.

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

## Examples

```vue
<script setup>
import FormConfirmDialog from "@vueda/form/confirm/FormConfirmDialog.vue";
import { useViewCreate } from "@vueda/use/useViewCreate.js";
import { memoizedStartCase } from "@vueda/utils/case.js";
import { onMounted, toRef } from "vue";

const props = defineProps({ app: String, model: String, redirectAfter: String });
const emit = defineEmits(["form-object", "form-context"]);
const { formContext, objectForm, instance, actions } = useViewCreate(props);

onMounted(() => {
    emit("form-object", toRef(() => formContext.state.values));
    emit("form-context", formContext);
});
</script>
<template>
    <!-- ...form markup (see examples below)... -->
    <!-- Required: resolves submit-time warning confirmations (HTTP 409); without it warned saves are cancelled. -->
    <FormConfirmDialog :controller="objectForm.confirmation" />
</template>
```

```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
<error-display
    :error="instance.combinedError"
    :errored="instance.combinedErrored"
    :ignore-form-validation-errors="true"
    :while-text="instance.combinedWhileText"
/>
<form :id="instance.formId" @submit.prevent="objectForm.submit">
    <form-model v-bind="instance.combinedFormProps" />
</form>
```

```html
<Button :form="instance.formId" :disabled="objectForm.state.loading" type="submit">
    Create
</Button>
```

## Methods

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

## Types

### [ViewCreateActionsGroup](/v3/reference/api/js/use/useViewCreate/types/ViewCreateActionsGroup.md)

### [ViewCreateContext](/v3/reference/api/js/use/useViewCreate/types/ViewCreateContext.md)

### [ViewCreateInstanceGroup](/v3/reference/api/js/use/useViewCreate/types/ViewCreateInstanceGroup.md)

### [ViewCreateOptions](/v3/reference/api/js/use/useViewCreate/types/ViewCreateOptions.md)

Required identification.

## Source

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