✅ Painless Vue forms
Deprecated reactive initial values #4402 (bbecc973)
Initial values can no longer be reactive since they did not serve any purpose for being so. The recommended API for setting async initial values is by explicitly calling resetForm
.
defineField
API #4497This is a new function available on useForm
and is meant to replace useFieldModel
, defineInputBinds
and defineComponentBinds
by building upon and improving those APIs.
<script setup>
import { useForm } from 'vee-validate';
const { defineField, errors } = useForm({
validationSchema: schema,
validateOnMount: true,
});
const [email, emalProps] = defineField('email', { validateOnModelUpdate: true });
const [password, pwProps] = defineField('password', { validateOnModelUpdate: true });
</script>
<template>
<input v-model="email" v-bind="emailProps" />
<span>{{ errors.email }}</span>
<input v-model="password" v-bind="pwProps" />
<span>{{ errors.password }}</span>
</div>
</template>
The docs have been updated to reflect using this new API instead of the deprecated ones. The old ones will continue to work till they get removed in next minor releases.
meta.required
Added support for meta.required
state for Typed Schemas only.
That means if you are using toTypedSchema
helper with either Yup, Zod, Valibot, or Global rules then it should be automatically done for you. This is a new experimental feature and may not work well with conditional schemas or dynamic ones.
For more info check the live demo link here.
@vee-validate/rules
package which caused issues for ESM importing #4470This only affects you if you are importing all the rules.
Migration:
- import AllRules from '@vee-validate/rules';
+ import * as AllRules from '@vee-validate/rules';
useSetFormValues
now accepts values generic type parameters (#4475) thanks to @ivan-angjelkoskiThis release is aimed at resolving #4421
useForm#defineComponentBinds
is now more strict and provides accurate typings for both modelValue
and update:modeValue
properties. Previously they were not exposed.Try the following example.
const { defineComponentBinds } = useForm({
validationSchema: toTypedSchema(yup.object({
date: yup.date().required(),
number: yup.number().required(),
string: yup.string().required(),
valueModel: yup.string().required(),
})),
});
const date = defineComponentBinds('date');
const number = defineComponentBinds('number');
const string = defineComponentBinds('string');
const valueModel = defineComponentBinds('valueModel');