v4.9.5

🐛 Bug Fixes

• Allow labels to be localized with dictionary names prop #4268 (16580b4)
• setFieldError sets meta.valid correctly #4274 (7356c10)

🆕 New features

• Exposed componentField on Field slot props to make it easier to integrate with components (#4270) thanks to @FedorSherbakov

v4.9.4

🐛 Bug Fixes

• Types: Exclude undefined and null from initial values resolution #4139 (f4ea2c0)
• Bundle: Components were not being tree-shaken correctly (#4266) thanks to @ydcjeff
• devtool: add compatibility for UTF character (#4265) thanks to @linghaoSu

v4.9.3

🐛 Bug Fixes

• Run validation on value change #4251 (09d5596)
• Hoist nested errors to the nearest parent state #4063 (#4259)

🆕 New features

• Added isValidating on the form context (#4244) thanks to @jusheng27

v4.9.2

🐛 Bug fixes

• Hiding array fields with v-if did not remove the last item correctly #4115 (fe322a0)
• Removing some items caused other items to lose value in a field array loop #4239 (31090e0)
• Validations run for unmounted fields when keep-values is enabled #4247 (9046308)

v4.9.1

🐛 Bug fixes

• Added type-fest to dependencies on the core package #4242 (681bbab)
• Hide nested value write warning if the value isn't an object (18f3c1c)
• Fix Type errors when using v-bind="field" on a textarea element #4031 (ce2f539)

v4.9.0

This release required a lot of internal changes to how vee-validate tracks fields to have better DX down the line. There shouldn't be any breaking changes to your apps, as all the tests are passing with these changes. But some behaviors may differ if you were using some unintentional bugs as features.

The main change is vee-validate shifting from thinking about fields as unique field instances to treating them as outlets for path values. The outcome is the same in most cases but allows for more ways for vee-validate to define fields.

💣 Possible breaking changes

• setValues was deleting the other values not specified, now it only sets the fields partially as provided without deleting any values. #4231 (298577b)
• If you were using a field's meta with group fields (checkboxes/radio), each field had its own meta, with this release all those fields will have the exact same meta values.
• Validations are now run only when a value setter has been triggered, this should not break anything but if you were using nested values as field values you will get a warning and which alternative to use.

🆕 New Features

Component Binds

useForm now exposes a new helper defineComponentBinds which allows you to create bindable objects for your components.

This is meant as replacement for useFieldModel and should replace using useField as a model. useField is still the best way to build input fields components, but if you don't want to wrap your fields with useField especially with 3rd party UI component libraries then defineComponentBinds is the way to go.

This is an example with Vuetify:

<script>
const schema = toTypedSchema(yup.object({
  email: yup.string().email().required().label('E-mail'),
  password: yup.string().min(6).required(),
}));

const { defineComponentBinds } = useForm({
  validationSchema: schema
});

const email = defineComponentBinds('email', {
 // maps error messages to Vuetify
  mapProps: (state) => ({ 'error-messages': state.errors  })
});
const password = defineComponentBinds('password');
</script>

<template>
  <v-text-field
    v-bind="email"
    label="email"
    type="email"
  />

  <v-text-field
    v-bind="password"
    label="password"
    type="password"
   />
</template>

Input Binds

Another helper exposed by useForm is defineInputBinds which allows you to create bindable objects for your HTML elements.

<script>
const schema = toTypedSchema(yup.object({
  email: yup.string().email().required().label('E-mail'),
  password: yup.string().min(6).required(),
}));

const { defineInputBinds } = useForm({
  validationSchema: schema
});

const email = defineInputBinds('email', {
 // Adds attributes to the element, like classes, aria-attrs, etc...
  mapAttrs: (state) => ({ 'aria-invalid': state.valid ? 'false' : 'true'  })
});
const password = defineInputBinds('password');
</script>

<template>
  <input
    v-bind="email"
    label="email"
    type="email"
  />

  <input
    v-bind="password"
    label="password"
    type="password"
   />
</template>

📚 Docs update WIP

The docs will be updated throughout the week to include a new guide for the composition API and the recommended ways to set up fields depending on the different requirements.

Some of the recently added features will be missing until the re-write is complete.

🐛 Bug Fixes

• Removing a field from useFieldArray should not trigger validation for unchanged fields #4017 (7554d4a)
• fix: handle mimes with plus symbol #4230 (f5b3482)
• fix: support surrogate pairs (#4229) thanks to @NaokiHaba
• fix: Zod transforms not reflecting in output types correctly #4227 (93228b7)
• fix: corrected slot prop types for field component #4223 (b2c4967)

v4.8.6

🆕 Nuxt Module

Published the offical vee-validate nuxt module, to install the module:

npm i @vee-validate/nuxt

then you can add it to nuxt.config.ts:

export default defineNuxtConfig({
  // ...
  modules: [
    //...
    '@vee-validate/nuxt',
  ],
});

check the documentation for more information and how to configure it.

v4.8.5

🐛 Bug Fixes

• Fixed zod unions errors not mapping to field errors #4204 (9048a23)
• Fixed falsy model initial value not overriding form value #4200 (07418b9)

v4.8.4

🐛 Bug Fixes

• properly unref the schema before checking for default values closes #4196 (8e3663d)

👕 TypeScript

• make initial values partial closes #4195 (eeccd0c)

🏗️ DX Improvements

• allow name ref to be a lazy function (8fb543a)

// no need to wrap this anymore with `computed` or with `toRef`.
const { value } = useField(() => props.name);

v4.8.3

🐛 Bug Fixes

• Fixed a bug with Zod's typed schema defaults logic that caused a crash sometimes #4186 (comment)