Vue rendering
Form creates the client-side engine, provides it to descendants, and renders the native <form> element around its slot content. Reach for FormProvider when the element belongs elsewhere—it is the same component without the element. createFormRenderer() creates schema traversal components without registering global state or emitting wrapper markup.
Form owns the <form> element. Do not nest your own inside it: the HTML parser drops nested forms, and the submit handler goes with them.Render fields with slots
<script setup lang="ts">
import {
createFormRenderer,
Form,
type FormResource,
} from '@inertify/form-vue'
defineProps<{ form: FormResource }>()
const { FormFields } = createFormRenderer()
</script>
<template>
<Form :form="form" v-slot="{ form: context, processing }">
<FormFields :form="context">
<template
#type-text="{
field,
name,
value,
error,
disabled,
readonly,
setValue,
blur,
registerElement,
}"
>
<label :for="`field-${name}`">{{ field.label }}</label>
<input
:id="`field-${name}`"
:ref="registerElement"
:name="name"
:value="value"
:placeholder="field.placeholder"
:disabled="disabled"
:readonly="readonly"
@input="setValue(($event.target as HTMLInputElement).value)"
@blur="blur"
>
<p v-if="error" role="alert">{{ error }}</p>
</template>
</FormFields>
<button type="submit" :disabled="processing">
Save
</button>
</Form>
</template>
Register the consumer-owned input with registerElement when you want scrollToFirstError to focus it. The slot also exposes the field controller, all errors, semantic state, validation, visibility, and mutation helpers.
Slot precedence
FormFields resolves a field slot in this order:
field-{path}, using the fully qualified data pathtype-{component}, normalized to kebab casedefault{name}-field, a deprecated compatibility fallback
Use before-{path}-field and after-{path}-field for insertion points.
Reuse your renderers
For larger applications, pass application-owned Vue components to createFormRenderer() once and export the generated FormField and FormFields components. Read renderers and composables for the registry shape and lower-level APIs.
<form> element, every element above belongs entirely to the consuming application.