### useForm with Initial Values Configuration

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-form.mdx

Example of configuring useForm with initial values for the form fields. This sets the starting state of the form when it is initialized.

```javascript
const { ... } = useForm({
  initialValues: {
    email: 'example@gmail.com',
    password: 'p@$$w0rd',
  }
});
```

--------------------------------

### Installation

Source: https://github.com/logaretm/vee-validate/blob/main/packages/rules/README.md

Install the @vee-validate/rules package using Yarn or npm.

```APIDOC
## Installation

Use the following commands to install the package:

### Yarn
```sh
yarn add @vee-validate/rules
```

### npm
```sh
npm install @vee-validate/rules
```
```

--------------------------------

### Initialize Project Environment

Source: https://github.com/logaretm/vee-validate/blob/main/CONTRIBUTING.md

Commands to clone the repository and install necessary dependencies using pnpm.

```shell
git clone https://github.com/logaretm/vee-validate.git
pnpm i
```

--------------------------------

### Run Documentation Locally

Source: https://github.com/logaretm/vee-validate/blob/main/CONTRIBUTING.md

Command to start the development server for the project documentation.

```shell
pnpm docs:dev
```

--------------------------------

### Install VeeValidate via Package Managers

Source: https://github.com/logaretm/vee-validate/blob/main/README.md

Commands to install the VeeValidate library into your project using common JavaScript package managers like yarn or npm.

```shell
yarn add vee-validate
npm install vee-validate --save
```

--------------------------------

### Install VeeValidate Nuxt module

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/integrations/nuxt.mdx

Commands to install the @vee-validate/nuxt package using various package managers like npm, pnpm, or yarn.

```shell
npm i @vee-validate/nuxt
pnpm add @vee-validate/nuxt
yarn add @vee-validate/nuxt
```

--------------------------------

### Install @vee-validate/i18n

Source: https://github.com/logaretm/vee-validate/blob/main/packages/i18n/README.md

Commands to install the localization package using yarn or npm package managers.

```shell
yarn add @vee-validate/i18n
npm install @vee-validate/i18n
```

--------------------------------

### Form Component Usage

Source: https://context7.com/logaretm/vee-validate/llms.txt

Demonstrates the basic setup and usage of the `<Form>` component in VeeValidate, including schema definition, initial values, and event handlers for submission and invalid submission.

```APIDOC
## Form Component Usage

### Description
This example shows how to integrate the VeeValidate `<Form>` component into a Vue.js application. It includes defining a validation schema using Yup, setting initial form values, and handling form submission and invalid submission events.

### Method
N/A (Vue Component)

### Endpoint
N/A (Vue Component)

### Parameters
#### Props
- **`validation-schema`** (Object) - Required - The Yup validation schema for the form.
- **`initial-values`** (Object) - Optional - The initial values for the form fields.

#### Events
- **`@submit`** - Emitted when the form is validly submitted. Passes form values and actions.
- **`@invalid-submit`** - Emitted when the form submission fails validation. Passes values, errors, and results.

### Request Example
```vue
<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  firstName: yup.string().required().min(2),
  lastName: yup.string().required().min(2),
  email: yup.string().required().email(),
  age: yup.number().required().min(18).max(120),
  website: yup.string().url().nullable(),
});

const initialValues = {
  firstName: '',
  lastName: '',
  email: '',
  age: null,
  website: '',
};

function onSubmit(values, actions) {
  console.log('Submitted:', values);
  // Simulate API error
  actions.setErrors({
    email: 'This email is already registered',
  });
}

function onInvalidSubmit({ values, errors, results }) {
  console.log('Invalid submission:', { values, errors, results });
}
</script>

<template>
  <Form
    v-slot="{ errors, meta, values, isSubmitting, handleReset }"
    :validation-schema="schema"
    :initial-values="initialValues"
    @submit="onSubmit"
    @invalid-submit="onInvalidSubmit"
  >
    <fieldset>
      <legend>Personal Information</legend>

      <div>
        <label for="firstName">First Name</label>
        <Field id="firstName" name="firstName" placeholder="John" />
        <ErrorMessage name="firstName" class="error" />
      </div>

      <div>
        <label for="lastName">Last Name</label>
        <Field id="lastName" name="lastName" placeholder="Doe" />
        <ErrorMessage name="lastName" class="error" />
      </div>

      <div>
        <label for="email">Email</label>
        <Field id="email" name="email" type="email" placeholder="john@example.com" />
        <ErrorMessage name="email" class="error" />
      </div>

      <div>
        <label for="age">Age</label>
        <Field id="age" name="age" type="number" />
        <ErrorMessage name="age" class="error" />
      </div>

      <div>
        <label for="website">Website (optional)</label>
        <Field id="website" name="website" type="url" placeholder="https://..." />
        <ErrorMessage name="website" class="error" />
      </div>
    </fieldset>

    <div class="form-actions">
      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? 'Saving...' : 'Save' }}
      </button>
      <button type="button" @click="handleReset">Reset</button>
    </div>

    <details>
      <summary>Form Debug</summary>
      <pre>Values: {{ values }}</pre>
      <pre>Errors: {{ errors }}</pre>
      <pre>Meta: {{ meta }}</pre>
    </details>
  </Form>
</template>
```

### Response
N/A (Vue Component - handles its own state and rendering)
```

--------------------------------

### Install @vee-validate/rules

Source: https://github.com/logaretm/vee-validate/blob/main/packages/rules/README.md

Installs the @vee-validate/rules package using either yarn or npm. This package provides common validation rules for vee-validate.

```sh
yarn add @vee-validate/rules

# or with npm
npm install @vee-validate/rules
```

--------------------------------

### Load Locales from CDN

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/i18n.mdx

Provides an example of loading locale files directly from a URL in a browser environment using the VeeValidate CDN bundles.

```html
<script src="path/to/vee-validate.js"></script>
<script src="path/to/@vee-validate/rules.js"></script>
<script src="path/to/@vee-validate/i18n.js"></script>

<script>
  Object.keys(VeeValidateRules).forEach(rule => {
    VeeValidate.defineRule(rule, VeeValidateRules[rule]);
  });

  VeeValidateI18n.loadLocaleFromURL('https://unpkg.com/@vee-validate/i18n@4.0.2/dist/locale/ar.json');

  VeeValidate.configure({
    generateMessage: VeeValidateI18n.localize('ar'),
  });
</script>
```

--------------------------------

### Install Vee-Validate using npm or yarn

Source: https://github.com/logaretm/vee-validate/blob/main/packages/vee-validate/README.md

Installs the Vee-Validate library into your project using either npm or yarn package managers. This is the first step to integrating form validation.

```sh
# Install with yarn
yarn add vee-validate

# Install with npm
npm install vee-validate --save
```

--------------------------------

### Install Vee-Validate Dependencies

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/tutorials/basics.mdx

Commands to add the vee-validate package to a Vue project using either yarn or npm.

```bash
yarn add vee-validate
# or
npm install vee-validate --save
```

--------------------------------

### Basic Form and Field Setup with VeeValidate

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/tutorials/basics.mdx

This snippet shows the basic integration of VeeValidate's `<Form>` and `<Field>` components into a Vue template. It replaces native input and form elements with VeeValidate's equivalents and sets up a simple submit handler.

```vue
<template>
  <div id="app">
    <Form @submit="onSubmit">
      <Field name="email" type="email" />

      <button>Sign up for newsletter</button>
    </Form>
  </div>
</template>

<script>
import { Form, Field } from 'vee-validate';

export default {
  components: {
    Form,
    Field,
  },
  methods: {
    onSubmit() {
      console.log('Submitting :(');
    },
  },
};
</script>
```

--------------------------------

### Vee-Validate Composition API Form Setup

Source: https://github.com/logaretm/vee-validate/blob/main/packages/vee-validate/README.md

Demonstrates setting up a form using Vee-Validate's Composition API with `useForm`, `defineField`, and `handleSubmit`. It includes a basic 'required' validation rule and shows how to bind input fields and display errors.

```vue
<script setup>
import { useForm } from 'vee-validate';

// Validation, or use `yup` or `zod`
function required(value) {
  return value ? true : 'This field is required';
}

// Create the form
const { defineField, handleSubmit, errors } = useForm({
  validationSchema: {
    field: required,
  },
});

// Define fields
const [field, fieldProps] = defineField('field');

// Submit handler
const onSubmit = handleSubmit(values => {
  // Submit to API
  console.log(values);
});
</script>

<template>
  <form @submit="onSubmit">
    <input v-model="field" v-bind="fieldProps" />
    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </form>
</template>
```

--------------------------------

### Initialize Form Values with useForm

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/composition-api/handling-forms.mdx

Sets the starting values for form fields using the initialValues option. This prevents fields from defaulting to undefined, which can cause issues with external validators.

```javascript
const { defineInputBinds } = useForm({
  initialValues: {
    email: 'test@example.com',
    password: 'p@$$w0rd',
  },
});
```

--------------------------------

### Implement Form Validation with Composition API

Source: https://github.com/logaretm/vee-validate/blob/main/README.md

Demonstrates how to use the useForm, defineField, and handleSubmit functions to manage form state and validation logic within a Vue 3 script setup block.

```vue
<script setup>
import { useForm } from 'vee-validate';

function required(value) {
  return value ? true : 'This field is required';
}

const { defineField, handleSubmit, errors } = useForm({
  validationSchema: {
    field: required,
  },
});

const [field, fieldProps] = defineField('field');

const onSubmit = handleSubmit(values => {
  console.log(values);
});
</script>

<template>
  <form @submit="onSubmit">
    <input v-model="field" v-bind="fieldProps" />
    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </form>
</template>
```

--------------------------------

### Implement Dynamic Field Arrays with useFieldArray

Source: https://context7.com/logaretm/vee-validate/llms.txt

This example demonstrates how to use the useFieldArray composable to manage a list of team members. It includes validation using yup, and provides methods for pushing, removing, moving, and duplicating items in the array.

```vue
<script setup>
import { Field, useForm, useFieldArray } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  teamName: yup.string().required(),
  members: yup.array().of(
    yup.object({
      name: yup.string().required('Member name is required'),
      email: yup.string().required().email('Invalid email'),
      role: yup.string().required('Role is required'),
    })
  ).min(1, 'At least one member required'),
});

const { handleSubmit, errors } = useForm({
  validationSchema: schema,
  initialValues: {
    teamName: '',
    members: [{ name: '', email: '', role: 'developer' }],
  },
});

const { fields, push, remove, swap, move, insert, replace, update } = useFieldArray('members');

const onSubmit = handleSubmit((values) => {
  console.log('Team:', values);
});

function addMember() {
  push({ name: '', email: '', role: 'developer' });
}

function removeMember(index) {
  if (fields.value.length > 1) {
    remove(index);
  }
}

function moveUp(index) {
  if (index > 0) {
    move(index, index - 1);
  }
}

function moveDown(index) {
  if (index < fields.value.length - 1) {
    move(index, index + 1);
  }
}

function duplicateMember(index) {
  const member = fields.value[index].value;
  insert(index + 1, { ...member, name: `${member.name} (copy)` });
}
</script>

<template>
  <form @submit="onSubmit">
    <div>
      <label>Team Name</label>
      <Field name="teamName" />
      <span v-if="errors.teamName" class="error">{{ errors.teamName }}</span>
    </div>

    <fieldset>
      <legend>Team Members</legend>

      <div v-for="(field, index) in fields" :key="field.key" class="member-row">
        <span class="member-number">#{{ index + 1 }}</span>

        <div>
          <Field :name="`members[${index}].name`" placeholder="Name" />
          <span v-if="errors[`members[${index}].name`]" class="error">
            {{ errors[`members[${index}].name`] }}
          </span>
        </div>

        <div>
          <Field :name="`members[${index}].email`" type="email" placeholder="Email" />
          <span v-if="errors[`members[${index}].email`]" class="error">
            {{ errors[`members[${index}].email`] }}
          </span>
        </div>

        <div>
          <Field :name="`members[${index}].role`" as="select">
            <option value="developer">Developer</option>
            <option value="designer">Designer</option>
            <option value="manager">Manager</option>
          </Field>
        </div>

        <div class="actions">
          <button type="button" @click="moveUp(index)" :disabled="field.isFirst">Up</button>
          <button type="button" @click="moveDown(index)" :disabled="field.isLast">Down</button>
          <button type="button" @click="duplicateMember(index)">Duplicate</button>
          <button type="button" @click="removeMember(index)" :disabled="fields.length <= 1">Remove</button>
        </div>
      </div>

      <button type="button" @click="addMember">Add Member</button>
    </fieldset>

    <span v-if="errors.members" class="error">{{ errors.members }}</span>

    <button type="submit">Create Team</button>
  </form>
</template>
```

--------------------------------

### useForm with Form Name Configuration

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-form.mdx

Example of setting a custom name for the form using the name option. This name is used for identification in the Vue Devtools.

```javascript
const { ... } = useForm({
  name: 'LoginForm', // Defaults to "Form"
});
```

--------------------------------

### Dynamic Field Configuration with Vee-Validate

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/composition-api/getting-started.mdx

Demonstrates how to pass a function to defineField to dynamically configure validation behavior based on field state. This example makes validation 'eager' after the first error.

```vue
<template>
  <Field name="name" :rules="eagerValidationRules" v-model="name">
    <input />
  </Field>
  <ErrorMessage name="name" />
</template>

<script setup>
import { Field, ErrorMessage, defineField } from 'vee-validate';
import { ref, computed } from 'vue';

const [name, nameConfig] = defineField('name');

const eagerValidationRules = computed(() => {
  return (value) => {
    if (!value) {
      return 'This field is required';
    }
    if (nameConfig.value.errors.length > 0) {
      return 'Eager validation triggered';
    }
    return true;
  };
});
</script>
```

--------------------------------

### useField with Different Validation Rule Types

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field.mdx

Provides examples of using `useField` with various types of validation rules. This includes globally defined rules using `defineRule` (Laravel-like syntax), rule objects, simple validation functions, and Yup schemas.

```javascript
// Globally defined rules with `defineRule`, Laravel-like syntax
useField('password', 'required|min:8');

// Globally defined rules object
useField('password', { required: true, min: 8 });

// Simple validation function
useField('password', value => {
  if (!value) {
    return 'password is required';
  }

  if (value.length < 8) {
    return 'password must be at least 8 characters long';
  }

  return true;
});

// Yup validation
useField('password', yup.string().required().min(8));
```

--------------------------------

### TypeScript Usage with useField

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field.mdx

Shows how to leverage TypeScript with the `useField` function for type safety. The example demonstrates defining the type for the field's value and how TypeScript enforces correct type assignments during value updates and field resets.

```typescript
const { value, resetField } = useField<string>('email', yup.string().email());

value.value = 1; // ⛔️  Error
value.value = 'test@example.com'; // ✅

resetField({
  value: 1, // ⛔️  Error
});
resetField({
  value: 'test@example.com', // ✅
});
```

--------------------------------

### Vee-Validate Declarative Components Form Setup

Source: https://github.com/logaretm/vee-validate/blob/main/packages/vee-validate/README.md

Illustrates form creation using Vee-Validate's declarative components, `Field` and `Form`. It shows how to register these components and apply a simple 'required' validation rule to a field, including error display.

```vue
<script setup>
import { Field, Form } from 'vee-validate';

// Validation, or use `yup` or `zod`
function required(value) {
  return value ? true : 'This field is required';
}

// Submit handler
function onSubmit(values) {
  // Submit to API
  console.log(values);
}
</script>

<template>
  <Form v-slot="{ errors }" @submit="onSubmit">
    <Field name="field" :rules="required" />

    <span>{{ errors.field }}</span>

    <button>Submit</button>
  </Form>
</template>
```

--------------------------------

### Basic useField Usage in Vue

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field.mdx

Demonstrates the fundamental usage of the `useField` function within a Vue component. It shows how to bind the field's value to an input element and display any validation error messages. This example uses a simple function for validation.

```vue
<template>
  <div>
    <input v-model="value" />
    <span>{{ errorMessage }}</span>
  </div>
</template>

<script setup>
import { useField } from 'vee-validate';

// a simple `name` field with basic required validator
const { value, errorMessage } = useField('name', inputValue => !!inputValue);
</script>
```

--------------------------------

### Basic Usage of useFieldArray in Vue

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field-array.mdx

Demonstrates the basic implementation of useFieldArray within a Vue component. It shows how to manage a list of dynamic fields (like URLs) in a form, allowing users to add, remove, and submit them. This example utilizes VeeValidate's Field component and form handling.

```vue
<template>
  <form @submit="onSubmit" novalidate>
    <div v-for="(field, idx) in fields" :key="field.key">
      <Field :name="`links[${idx}].url`" type="url" />

      <button type="button" @click="remove(idx)">Remove</button>
    </div>

    <button type="button" @click="push({ url: '' })">Add</button>

    <button>Submit</button>
  </form>
</template>

<script setup>
import { Field, useForm, useFieldArray } from 'vee-validate';

const { handleSubmit } = useForm({
  initialValues: {
    links: [{ id: 1, url: 'https://github.com/logaretm' }],
  },
});

const { remove, push, fields } = useFieldArray('links');
const onSubmit = handleSubmit(values => {
  console.log(JSON.stringify(values, null, 2));
});
</script>
```

--------------------------------

### Basic defineField Usage for HTML Inputs (TypeScript)

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/composition-api/getting-started.mdx

Demonstrates the fundamental usage of `defineField` to get a value model and input bindings for an 'email' field. This setup automatically updates form values as the user types.

```typescript
import { useForm } from 'vee-validate';

const { defineField } = useForm();

const [email, emailAttrs] = defineField('email');
```

--------------------------------

### Build and Test Project

Source: https://github.com/logaretm/vee-validate/blob/main/CONTRIBUTING.md

Commands to build the project bundles, execute unit tests, and check test coverage.

```shell
pnpm build
pnpm test
pnpm cover
```

--------------------------------

### Implementing Renderless Forms

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/form.mdx

Shows how to set the 'as' prop to an empty string to create a renderless form, useful for custom form markup.

```vue-html
<Form as="" v-slot="{ values, submitForm }">
  <h2>Sign up form</h2>
  <form @submit="submitForm">
    <Field name="name" />
    <Field name="email" type="email" />
    <Field name="password" type="password" />

    <pre>
      {{ values }}
    </pre>
  </form>
</Form>
```

--------------------------------

### Adding items with push and prepend

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field-array.mdx

Demonstrates adding items to the end or beginning of an array using the push and prepend methods.

```javascript
const { push } = useFieldArray('links');
const myPushFunction = () => { push({ url: '' }); };

const { prepend } = useFieldArray('links');
const myPrependFunction = () => { prepend({ url: '' }); };
```

--------------------------------

### configure() Function

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/configuration.mdx

The configure function allows developers to update global settings for VeeValidate at runtime, affecting subsequent field initializations.

```APIDOC
## configure(options)

### Description
Updates the global configuration for VeeValidate. Changes take effect for new Field components and useField hooks initialized after the call.

### Parameters
#### Request Body
- **bails** (boolean) - Optional - Whether to run validations to completion or quit on the first error.
- **generateMessage** (function) - Optional - A message generator function for i18n libraries.
- **validateOnBlur** (boolean) - Optional - Trigger validation on blur event (Field component only).
- **validateOnChange** (boolean) - Optional - Trigger validation on change event (Field component only).
- **validateOnInput** (boolean) - Optional - Trigger validation on input event (Field component only).
- **validateOnModelUpdate** (boolean) - Optional - Trigger validation on model update (Field component only).

### Request Example
{
  "bails": false,
  "validateOnBlur": true
}

### Response
#### Success Response (void)
- Returns nothing, updates internal state.
```

--------------------------------

### Mocking Form and Field Contexts

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/testing.mdx

Demonstrates how to import injection keys and provide mocked FormContext and FieldContext objects using Vue's `provide` API.

```APIDOC
## Mocking Form and Field Contexts

This section covers the process of mocking `FormContext` and `FieldContext` objects in Vee-Validate, primarily for unit testing components that rely on these contexts via Vue's `provide/inject` API.

### Method

`provide` (Vue API)

### Endpoint

N/A (This is a client-side mocking technique)

### Parameters

N/A

### Request Example

```js
import { provide } from 'vue';
import { FormContextKey, FieldContextKey } from 'vee-validate';

// Assume MockedForm and MockedField are your custom mock objects
const MockedForm = { /* ... implementation ... */ };
const MockedField = { /* ... implementation ... */ };

provide(FormContextKey, MockedForm);
provide(FieldContextKey, MockedField);
```

### Response

N/A (This is a client-side setup, not an API response)

### Further Information

For detailed implementation of mock objects, refer to the Vee-Validate source code for the typescript interfaces of [`FormContext`](https://github.com/logaretm/vee-validate/blob/main/packages/vee-validate/src/types.ts#L145) and [`FieldContext`](https://github.com/logaretm/vee-validate/blob/main/packages/vee-validate/src/types.ts#L66).
```

--------------------------------

### Get Form Submit Count with useSubmitCount

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/composition-helpers.mdx

Returns a computed reference to the number of times the form has been submitted. This can be used for tracking submission attempts.

```javascript
import { useSubmitCount } from 'vee-validate';

const count = useSubmitCount();

count.value;
```

--------------------------------

### Build Specific Packages

Source: https://github.com/logaretm/vee-validate/blob/main/CONTRIBUTING.md

Commands to build the entire monorepo or target specific packages by their folder name.

```shell
pnpm build
pnpm build vee-validate
pnpm build rules
pnpm build zod
```

--------------------------------

### Handling Form Submissions (Native)

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/components/handling-forms.mdx

Illustrates how to configure the `Form` component for native HTML form submissions, ensuring validation before submission.

```APIDOC
## Handling Form Submissions (Native)

### Description
Configure the `<Form />` component for native HTML form submissions. Vee-validate ensures that the form is only submitted if all fields are valid, preventing submission otherwise.

### Method
POST (or other as defined by `method` prop)

### Endpoint
`/api/users` (or as defined by `action` prop)

### Parameters
#### Form Component Props
- **method** (String) - The HTTP method for the form submission (e.g., 'post').
- **action** (String) - The URL to submit the form data to.
- **:validation-schema** (Object) - The validation schema to use for the form.

### Request Example
```vue-html
<Form method="post" action="/api/users" :validation-schema="schema">
  <Field name="email" type="email" />
  <Field name="name" />
  <Field name="password" type="password" />

  <button>Submit</button>
</Form>
```

### Response
#### Success Response (200)
N/A (Page reload or redirect based on server response)

#### Response Example
N/A (Typically a page redirect or reload)
```

--------------------------------

### Configure @vee-validate/nuxt Module Options

Source: https://github.com/logaretm/vee-validate/blob/main/packages/nuxt/README.md

Example of configuring vee-validate Nuxt module options, including disabling auto-imports and customizing component names.

```typescript
export default defineNuxtConfig({
  // ...
  modules: [
    //...
    [
      '@vee-validate/nuxt',
      {
        // disable or enable auto imports
        autoImports: true,
        // Use different names for components
        componentNames: {
          Form: 'VeeForm',
          Field: 'VeeField',
          FieldArray: 'VeeFieldArray',
          ErrorMessage: 'VeeErrorMessage',
        },
      },
    ],
  ],
});
```

```typescript
export default defineNuxtConfig({
  // ...
  modules: [
    //...
    '@vee-validate/nuxt',
  ],
  veeValidate: {
    // disable or enable auto imports
    autoImports: true,
    // Use different names for components
    componentNames: {
      Form: 'VeeForm',
      Field: 'VeeField',
      FieldArray: 'VeeFieldArray',
      ErrorMessage: 'VeeErrorMessage',
    },
  },
});
```

--------------------------------

### Get Form Validating State with useIsValidating

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/composition-helpers.mdx

Returns a computed reference to the form's current validation status. This indicates whether any fields are currently being validated.

```javascript
import { useIsValidating } from 'vee-validate';

const isValidating = useIsValidating();

isValidating.value; // true or false
```

--------------------------------

### Configure Field Options

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field.mdx

Demonstrates passing configuration options like label and initialValue to the useField composable.

```vue
<template>
  <div>
    <input v-model="value" />
    <span>{{ errorMessage }}</span>
  </div>
</template>

<script setup>
import { useField } from 'vee-validate';

const { value, errorMessage } = useField('company', ..., {
  label: 'Your company',
  initialValue: ''
});
</script>
```

--------------------------------

### Get Form Values with useFormValues

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/composition-helpers.mdx

Returns a computed reference to an object containing all current values of the form's fields. This is useful for accessing the complete form state.

```javascript
import { useFormValues } from 'vee-validate';

const values = useFormValues();

values.value;
```

--------------------------------

### Field Configuration Options

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field.mdx

Configuration options available when initializing a field with useField.

```APIDOC
## Field Options

### Description
Additional configuration options to customize field behavior.

### Options
- **type** (string) - Optional - Field type (e.g., 'checkbox', 'radio').
- **label** (string) - Optional - Human-readable label for the field.
- **initialValue** (any) - Optional - The starting value of the field.
- **validateOnMount** (boolean) - Optional - Whether to validate on component mount.
- **bails** (boolean) - Optional - Whether to stop validation on the first error.
- **standalone** (boolean) - Optional - Whether the field is independent of a parent form.
- **validateOnValueUpdate** (boolean) - Optional - Whether to validate when the value changes.
- **keepValueOnUnmount** (boolean) - Optional - Whether to persist the value when the component is unmounted.
- **syncVModel** (boolean) - Optional - Whether to sync with v-model.
- **checkedValue** (any) - Optional - Value when checked (checkbox/radio only).
- **uncheckedValue** (any) - Optional - Value when unchecked (checkbox/radio only).
```

--------------------------------

### Define All Rules from @vee-validate/rules

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/global-validators.mdx

Shows how to import all available rules from the @vee-validate/rules package and define them globally in one go.

```javascript
import { defineRule } from 'vee-validate';
import { all } from '@vee-validate/rules';

Object.entries(all).forEach(([name, rule]) => {
  defineRule(name, rule);
});
```

--------------------------------

### Get Field Value with useFieldValue

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/composition-helpers.mdx

Returns a computed reference to the current value of a specified form field. If no field name is provided, it attempts to find the nearest parent field.

```javascript
import { useFieldValue } from 'vee-validate';

const currentValue = useFieldValue('fieldName');

currentValue.value;
```

```javascript
import { useFieldValue } from 'vee-validate';

// Will look for the first parent that used `useField`
const currentValue = useFieldValue();
```

--------------------------------

### Get Form Submitting State with useIsSubmitting

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/composition-helpers.mdx

Returns a computed reference to the form's submission status. This is useful for disabling submit buttons or showing loading indicators during form submission.

```javascript
import { useIsSubmitting } from 'vee-validate';

const isSubmitting = useIsSubmitting();

isSubmitting.value; // true or false
```

--------------------------------

### Enable v-model Syncing with useField

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/composition-api/custom-inputs.mdx

Demonstrates how to use the syncVModel option in useField to automatically handle v-model updates, reducing boilerplate code for custom input components.

```javascript
const props = defineProps({
  modelValue: String,
});

const { value, errorMessage } = useField('fieldName', undefined, {
  syncVModel: true,
});
```

```javascript
const props = defineProps({
  text: String,
});

const { value, errorMessage } = useField('fieldName', undefined, {
  syncVModel: 'text',
});
```

--------------------------------

### Initialize Vue Component Structure

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/tutorials/basics.mdx

The base template for a Vue 3 single-file component before adding validation logic.

```vue
<template>
  <div id="app"></div>
</template>

<script>
export default {};
</script>
```

--------------------------------

### Basic Yup Schema Validation with Vee-Validate

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/components/validation.mdx

Demonstrates how to define a Yup validation schema and integrate it with the Vee-Validate Form component. This setup allows for declarative validation rules for form fields.

```javascript
const schema = yup.object({
  email: yup.string().required().email(),
  name: yup.string().required(),
  password: yup.string().required().min(8),
});
```

```vue
<template>
  <Form @submit="submit" :validation-schema="schema">
    <Field name="email" />
    <ErrorMessage name="email" />

    <Field name="password" type="password" />
    <ErrorMessage name="password" />

    <button>Submit</button>
  </Form>
</template>

<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().required().email(),
  password: yup.string().required().min(8),
});
</script>
```

--------------------------------

### Inserting and updating array items

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field-array.mdx

Demonstrates how to insert a new item at a specific index and how to update an existing item's value.

```javascript
const { insert } = useFieldArray('links');
const myInsertFunction = () => { insert(1, { url: '' }); };

const { update } = useFieldArray('links');
const myUpdateFunction = () => { update(1, { url: '' }); };
```

--------------------------------

### useForm with Generic Type for Typing

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-form.mdx

Demonstrates how to use a generic type with useForm to get type information for form fields and their values. This enhances type safety for properties and methods like setErrors and setFieldValue.

```typescript
import { useForm } from 'vee-validate';

interface LoginForm {
  email: string;
  password: string;
}

// in your setup
const { errors } = useForm<LoginForm>();
```

--------------------------------

### Using handleSubmit for Manual Form Submission

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/components/handling-forms.mdx

Demonstrates how to use the `handleSubmit` slot prop to manually handle form submissions. The provided callback is executed only if the form is valid.

```APIDOC
## POST /api/users (Example)

### Description
Handles form submission manually using the `handleSubmit` slot prop. The `onSubmit` function is called with form values upon successful validation.

### Method
POST

### Endpoint
/api/users (example)

### Parameters
#### Request Body
- **email** (string) - Required - The user's email address.
- **password** (string) - Required - The user's password.

### Request Example
```json
{
  "email": "user@example.com",
  "password": "password123"
}
```

### Response
#### Success Response (200)
- **message** (string) - A success message indicating the form was submitted.

#### Response Example
```json
{
  "message": "Form submitted successfully!"
}
```
```

--------------------------------

### Define Rules with Arguments

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/global-validators.mdx

Demonstrates creating global rules that accept parameters, such as a minLength rule, by accessing the second argument of the validator function.

```javascript
import { defineRule } from 'vee-validate';

defineRule('minLength', (value, [limit]) => {
  if (!value || !value.length) {
    return true;
  }
  if (value.length < limit) {
    return `This field must be at least ${limit} characters`;
  }
  return true;
});
```

--------------------------------

### Handling File Inputs with Vee-Validate - Vue

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/components/validation.mdx

Example of how to handle file inputs with Vee-Validate, specifically addressing the limitations of two-way binding for file values. It demonstrates listening to specific events like 'change' and 'blur'.

```vue
<Field name="file" v-slot="{ handleChange, handleBlur }">
  <input type="file" @change="handleChange" @blur="handleBlur" />
</Field>

```

--------------------------------

### VeeValidate: Field Validation with Custom Function

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/composition-api/custom-inputs.mdx

Provides an example of using a custom validation function with VeeValidate's `useField`. This approach offers flexibility for complex or unique validation logic that may not fit standard schema libraries.

```vue
<template>
  <input v-model="value" />
  {{ errorMessage }}
</template>

<script setup>
import { useField } from 'vee-validate';

const props = defineProps({
  name: String,
});

// Define a custom validation function
const validateMyField = (value) => {
  if (!value || value.length < 3) {
    return 'Field must be at least 3 characters long';
  }
  return true;
};

const { value, errorMessage } = useField(() => props.name, validateMyField);
</script>
```

--------------------------------

### Apply Rules with Arguments

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/global-validators.mdx

Shows how to pass arguments to global rules in the Field component using the colon syntax, including multiple comma-separated arguments.

```vue-html
<Field name="password" type="password" rules="required|minLength:8" />
<Field name="longitude" type="number" rules="required|minMax:-180,180" />
```

--------------------------------

### useForm with Initial Touched Status Configuration

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-form.mdx

Shows how to configure the initial touched status for form fields using the initialTouched option. This allows pre-setting which fields are considered touched upon mounting.

```javascript
const { ... } = useForm({
  initialTouched: {
    email: true, // touched
    password: false, // non-touched
  }
});
```

--------------------------------

### Set Initial Form Values with Vee-Validate

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/components/handling-forms.mdx

Utilize the `initialValues` prop on the `<Form />` component to provide starting values for form fields. This prop accepts an object where keys are field names and values are their initial states. Initial validation will be triggered.

```vue
<template>
  <Form :validation-schema="schema" :initial-values="formValues">
    <Field name="email" type="email" />
    <ErrorMessage name="email" />

    <Field name="password" type="password" />
    <ErrorMessage name="password" />

    <button type="Submit">Submit</button>
  </Form>
</template>

<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().required().email(),
  password: yup.string().required().min(8),
});

// Initial values
const formValues = {
  email: 'example@example.com',
  password: 'P@$$w0Rd',
};
</script>
```

--------------------------------

### FieldArray Component Usage Example

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/field-array.mdx

Demonstrates how to use the FieldArray component to manage a list of URL fields. It includes adding, removing, and submitting array data. The component requires a parent Form and uses v-slot to access manipulation functions.

```vue
<template>
  <Form @submit="onSubmit" :initial-values="initialValues">
    <FieldArray name="links" v-slot="{ fields, push, remove }">
      <div v-for="(field, idx) in fields" :key="field.key">
        <Field :name="`links[${idx}].url`" type="url" />

        <button type="button" @click="remove(idx)">Remove</button>
      </div>

      <button type="button" @click="push({ id: Date.now(), name: '', url: '' })">Add</button>
    </FieldArray>

    <button>Submit</button>
  </Form>
</template>

<script setup>
// you can set initial values for those array fields
const initialValues = {
  links: [{ id: 1, url: 'https://github.com/logaretm' }],
};

function onSubmit(values) {
  alert(JSON.stringify(values, null, 2));
}
</script>
```

--------------------------------

### Initialize useFieldArray with Array Path

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/composition-api/nested-objects-and-arrays.mdx

Demonstrates how to initialize the `useFieldArray` composable by providing the root path to the array within the form's state. This path can use dot notation for nested objects or indices for arrays.

```javascript
const { remove, push, fields } = useFieldArray('users');
```

```javascript
const { remove, push, fields } = useFieldArray('settings.dns.domains');
```

--------------------------------

### useField Value Binding and Update (JavaScript)

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field.mdx

Demonstrates how to access and update the field's value using the `value` ref and the `setValue` method. It also shows how to bind the value with `v-model` for two-way data binding and validation.

```javascript
const { value } = useField('field', value => !!value);

value.value = 'hello world'; // sets the value and validates the field
```

```javascript
const { setValue } = useField('field', value => !!value);

setValue('hello world') // sets the value and validates the field
```

--------------------------------

### Resetting Form with Initial Values

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-form.mdx

Demonstrates how to reset form values to a specified set of initial values using the `resetForm` function. It explains the default merge behavior and how to force a complete overwrite of all fields.

```javascript
const { resetForm } = useForm();

function onSubmit(values) {
  // send values to the API
  // ...

  // Reset the form values
  resetForm({
    values: {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
    },
  });
}
```

```javascript
const { values, resetForm } = useForm({
  initialValues: { fname: '123', lname: '456' },
});

// values: { fname: 'test', lname: '456' }
resetForm({ values: { fname: 'test' } });

// values: { fname: 'test' }
resetForm({ values: { fname: 'test' } }, { force: true });
```

--------------------------------

### Field Reset Functionality (JavaScript)

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/api/use-field.mdx

Details the `resetField` and `handleReset` methods for resetting a field's validation state. `resetField` is more flexible, allowing partial state updates, while `handleReset` is a safe event handler alternative. Examples cover resetting meta, value, and errors.

```javascript
const { resetField } = useField('field', value => !!value);

// reset the field meta and its initial value and clears errors
resetField();

// reset the meta state, clears errors and updates the field value and its initial value
resetField({
  value: 'new value',
});

// resets the meta state, resets the field to its initial value and sets the errors
resetField({
  errors: ['bad field'],
});

// Marks the field as touched, while resetting its value and errors.
resetField({
  touched: true,
});

// Changes the meta, initial and current values and sets the errors for the field
resetField({
  value: 'new value',
  touched: true,
  errors: ['bad field'],
});
```

```vue
<!-- ⛔️ Unsafe -->
<button @click="resetField">Reset</button>

<!-- ✅  Safe -->
<button @click="resetField()">Reset</button>
```

```javascript
const { handleReset } = useField('field', value => !!value);

// reset the field validation state and its initial value
handleReset();
```

--------------------------------

### Basic Custom Checkbox Integration with Vee-Validate

Source: https://github.com/logaretm/vee-validate/blob/main/docs/src/pages/guide/composition-api/custom-inputs.mdx

Provides a basic example of integrating a custom checkbox component with Vee-Validate. It demonstrates using the `handleChange` function returned by `useField` for managing checkbox state changes, which correctly handles toggling values and array management for checkbox groups.

```vue
<template>
  <input
    type="checkbox"
    :checked="checked"
    :value="'opt1'"
    @change="handleChange"
  />
</template>

<script lang="ts" setup>
import { useField } from 'vee-validate';

const { handleChange, checked } = useField('myCheckbox', undefined, {
  type: 'checkbox',
  checkedValue: 'opt1',
});
</script>
```

--------------------------------

### useForm Composable

Source: https://context7.com/logaretm/vee-validate/llms.txt

Demonstrates how to use the `useForm` composable to manage form state, define validation schemas, and handle form submission with vee-validate.

```APIDOC
## useForm Composable

### Description
The `useForm` composable provides a flexible way to manage form state, including field values, validation errors, and submission status. It integrates with validation schema libraries like Yup.

### Method
Composable function

### Endpoint
N/A (Client-side composable)

### Parameters
#### Configuration Options
- **validationSchema** (object) - Required - The validation schema for the form (e.g., Yup schema).
- **initialValues** (object) - Optional - The initial values for the form fields.

#### Returned Values
- **defineField**: Function to define a form field, returning a model and props.
- **handleSubmit**: Function to handle form submission, including validation.
- **errors**: Object containing validation errors for each field.
- **values**: Object containing the current form field values.
- **meta**: Object containing form meta information (valid, dirty, touched).
- **resetForm**: Function to reset the form to its initial state.
- **setFieldError**: Function to manually set an error for a specific field.
- **setErrors**: Function to set multiple errors for fields.
- **setFieldValue**: Function to manually set the value of a field.
- **setValues**: Function to set multiple field values.
- **validate**: Function to manually trigger form validation.
- **isSubmitting**: Boolean indicating if the form is currently being submitted.

### Request Example
```javascript
// Inside a Vue component's <script setup>
import { useForm } from 'vee-validate';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().required().email(),
  password: yup.string().required().min(8),
});

const { defineField, handleSubmit, errors, values, meta, resetForm, setFieldError, setErrors, setFieldValue, setValues, validate, isSubmitting } = useForm({
  validationSchema: schema,
  initialValues: { email: '', password: '' },
});

const [email, emailProps] = defineField('email');
const [password, passwordProps] = defineField('password');

const onSubmit = handleSubmit(async (formValues) => {
  console.log('Form submitted:', formValues);
  // Handle submission logic
});
```

### Response
#### Success Response (Form Submission)
- **None** (typically handled by `handleSubmit` callback)

#### Response Example (Form Submission Callback)
```javascript
// Inside the handleSubmit callback
async (formValues, actions) => {
  // formValues: { email: '...', password: '...' }
  // actions: contains methods like setErrors, resetForm, etc.
  console.log('Form submitted with values:', formValues);
  // Example: API call
  // await fetch('/api/login', { method: 'POST', body: JSON.stringify(formValues) });
}
```

#### Error Response (Form Submission)
- **Server-side errors**: Can be set using `actions.setErrors` within the `handleSubmit` callback.

#### Error Response Example (Form Submission Callback)
```javascript
// Inside the handleSubmit callback
async (formValues, actions) => {
  // Example: Handling API errors
  // const response = await fetch('/api/login', { method: 'POST', body: JSON.stringify(formValues) });
  // if (!response.ok) {
  //   const data = await response.json();
  //   actions.setErrors(data.errors); // Assuming API returns { errors: { fieldName: 'error message' } }
  // }
}
```
```