v4.12.0

💣 Breaking Changes

Deprecated reactive initial values #4402 (bbecc97)

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 #4497

This 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.

🆕 DX improvements

• feat: add label support to defineField #4530 (f9a9584)
• feat(DX): allow getters for field arrays paths (95b701f)

🐛 Bug Fixes

• Avoid overriding paths and destroy path on remove #4476 #4557 (f688896)
• Clone values before reset #4536 (2abb896)
• Handle hoisted paths overriding one another (e370413)

v4.11.8

🐛 Bug Fixes

• (perf) Avoid triggering extra model value events #4461 (d1b5b85)

👕 TypeScript

• Allow null as a valid Form prop type #4483 (78c4668)

v4.11.7

💣 Breaking Changes

• Removed default export from the @vee-validate/rules package which caused issues for ESM importing #4470

This only affects you if you are importing all the rules.

Migration:

- import AllRules from '@vee-validate/rules';
+ import * as AllRules from '@vee-validate/rules';

👕 Types

• useSetFormValues now accepts values generic type parameters (#4475) thanks to @ivan-angjelkoski
• Exported missing internal types causing a build error #4478 (a1414f6)

🆕 New Features

• Added Joi schema support thanks to @lallenfrancisl (#4463), it was sneaked in a previous release tag but it is being announced here to acknowledge that addition.
• Valibot and Yup schemas now merge their default values with the initial form values, allowing you to use each lib's schema defaults more freely (c372718)

v4.11.6

👕 TypeScript

This 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');

v4.11.5

🐛 Bug Fixes

The latest release introduced a bug with detecting external changes to models when the default updateOnValueUpdate is set to true. This release fixes that #4404 (804ec6f)

v4.11.4

🐛 Bug fixes

• Silent validation should not mark a field as validated ( b53400e)
• Clone the schema object before validating typed schemas to avoid outputting proxies #4459 (8f680bf)
• Respect validateOnModelUpdate configuration #4451 #4467 (5231f43)

🆕 New features

• feat: added reset options to force values changing to the given values without merging the old ones #4440 (4d8ed7e)

v4.11.3

This release updates valibot support to v0.13.0 and replaces the usage of deprecated API methods. #4414 (#4415)

v4.11.2

🆕 New features

You can now query fields meta state using isFieldTouched, isFieldDirty, and isFieldValid helpers on useForm.

const { isFieldDirty } = useForm();

isFieldDirty('myField') // true or false

// or compose it to be reactive:
const isFieldDirty  = computed(() => isFieldDirty('myField'));

🐛 Bug Fixes

• Do not warn if a form or a field was resolved closes #4399 (2ff045c)

👕 Types

• Expose all internal types #4409 (73219b4) (4947e88)

v4.11.1

🐛 Bug fixes

• handleChange should now infer value as a number from Input type range (5e23dcb)

v4.11.0

This release contains a couple of new features

🆕 Composition API setters

Added composition functions to set field and form values, meta, and errors from their child components. The functions are:

• useSetFieldValue: sets a field's value.
• useSetFieldTouched: sets a field's touched state.
• useSetFieldError: sets a field's error message.
• useSetFormValues: sets form values.
• useSetFormTouched: sets multiple or all fields touched state.
• useSetFormErrors: sets form error messages.

🆕 Initial support for Valibot

Valibot is an impressive new schema validation library, mainly it offers Zod-like features at a much less bundle size due to its non-chainable API while still being easy to use and fully typed.

Because of this, vee-validate now supports it as a schema provider using the @vee-validate/valibot package that exposes the same API function toTypedSchema that you can use to get TypeScript support into your forms input and output values.

Quick example:

import { useForm } from 'vee-validate';
import { toTypedSchema } from '@vee-validate/valibot';
import { email, string, minLength, object } from 'valibot';

const { errors, values } = useForm({
  validationSchema: toTypedSchema(
    object({
      email: string([minLength(1, 'Email is required'), email()]),
      password: string([minLength(6, 'password too short')]),
    }),
  ),
});

Refer to the docs for live examples and more information on typed schemas.