Form

The <FormifyForm /> component is the same as the native equivalent with some extra magic under the hood.

This is the base component for every form. The data will be extracted automatically.

<script lang="ts" setup>
import { FormifyForm, Field } from 'vue-formify';

const sendForm = (data) => {
	console.log(data);
};

</script>
<template>
	<FormifyForm @submit="sendForm">
		<Field name="first_name" />
		<Field name="last_name" />
		<button>Send</button>
	</FormifyForm>
</template>

Api reference

Props

Prop	Description
enctype	Specifies how the form data should be encoded.
action	If you set it it will send the data with redirect like the native form
validation-schema	You can pass validation schema object from yup/zod/valibot/joi
preserve	Preserve form data even the Form component is unmounted

Events

Event	Description
submit	Send form data. Data will be automatically extracted.
value-change	Event when form data changed. Good for side effects.

Methods

Method	Parameter	Description
reset	void	Reset form to default value.
flush	void	Forced reset.
setError	{ name: string; error: any }	Set error messages for specified input.

Slots

Slot	Parameter	Description
default	{ values, errors }	Gives back the form data and errors.