Skip to content

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.

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

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

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

Api reference

Props

PropDescription
enctypeSpecifies how the form data should be encoded. If you set it to multipart/form-data then the data will be FormData instead of JSON.
actionIf you set it it will send the data with redirect like the native form
validation-schemaYou can pass validation schema object from yup/zod/valibot

Events

EventDescription
submitSend form data. Data will be automatically extracted.

Methods

MethodParameterDescription
resetFormReset form to default value.
setError{ name: string; error: any }Set error messages for specified input.
hideInputError{ name: string }Hide error messages from specified input.

Slots

SlotParameterDescription
defaultGives back the form data