\n āļø HEADS UP: You are viewing the documentation for v4.x (Vue 3.0) For Vue 2.x head over to\n v3.x documentation\n
\n \n \n\n \n\n \n\n
\n\n\n\n"
},
{
"path": "docs/src/components/VersionSwitcher.vue",
"content": "\n \n \n ![]()
\n ![]()
\n \n
\n - \n
\n {{ version.text }}\n Vue {{ version.vueVersion }}\n
\n \n values: {{ values }}\n\n"
},
{
"path": "docs/src/components/examples/CompositionComponentBindsBasic02.vue",
"content": "\n\n\n errors: {{ errors }}\n values: {{ values }}\n\n"
},
{
"path": "docs/src/components/examples/CompositionComponentBindsBasic03.vue",
"content": "\n\n\n {{ errors.email }}
\n\n values: {{ values }}\n\n"
},
{
"path": "docs/src/components/examples/CompositionComponentBindsBasic04.vue",
"content": "\n\n\n values: {{ values }}\n errors: {{ errors }}\n\n"
},
{
"path": "docs/src/components/examples/CompositionComponentBindsBasic05.vue",
"content": "\n\n\n \n {{ errors.email }}
\n\n values: {{ values }}\n\n"
},
{
"path": "docs/src/components/examples/CompositionCustomField01.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionCustomField02.vue",
"content": "\n Model: {{ email }}\n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionCustomField03.vue",
"content": "\n values: {{ values }}\n errors: {{ errors }}\n\n"
},
{
"path": "docs/src/components/examples/CompositionDynamicSchemaComputed.vue",
"content": "\n\n\n \n\n \n {{ errors.content }}
\n\n"
},
{
"path": "docs/src/components/examples/CompositionDynamicSchemaYupLazy.vue",
"content": "\n\n\n \n\n \n {{ errors.content }}
\n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms01.vue",
"content": "\n\n\n \n\n \n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms02.vue",
"content": "\n\n\n \n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms03.vue",
"content": "\n\n\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms04.vue",
"content": "\n\n\n \n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms05.vue",
"content": "\n\n\n \n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms06.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms07.vue",
"content": "\n \n\n \n\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms08.vue",
"content": "\n\n\n \n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms09.vue",
"content": "\n\n\n \n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms10.vue",
"content": "\n\n\n \n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms11.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms12.vue",
"content": "\n\n\n \n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms13.vue",
"content": "\n\n\n \n\n"
},
{
"path": "docs/src/components/examples/CompositionHandlingForms14.vue",
"content": "\n\n\n \n\n"
},
{
"path": "docs/src/components/examples/CompositionInputBindsBasic01.vue",
"content": "\n\n\n \n\n values: {{ values }}\n\n"
},
{
"path": "docs/src/components/examples/CompositionInputBindsBasic02.vue",
"content": "\n\n\n \n\n values: {{ values }}\n errors: {{ errors }}\n\n"
},
{
"path": "docs/src/components/examples/CompositionInputBindsBasic03.vue",
"content": "\n\n\n \n\n values: {{ values }}\n errors: {{ errors }}\n\n"
},
{
"path": "docs/src/components/examples/CompositionInputFieldFn.vue",
"content": "\n \n {{ errorMessage }}\n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionInputFieldValibot.vue",
"content": "\n \n {{ errorMessage }}\n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionInputFieldYup.vue",
"content": "\n \n {{ errorMessage }}\n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionInputFieldZod.vue",
"content": "\n \n {{ errorMessage }}\n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionNested01.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionNested02.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionNested03.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionNested04.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionNested05.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CompositionValibotBasic.vue",
"content": "\n\n\n \n {{ errors.email }}
\n\n \n {{ errors.password }}
\n\n"
},
{
"path": "docs/src/components/examples/CompositionValidateFnBasic.vue",
"content": "\n\n\n \n {{ errors.email }}\n\n"
},
{
"path": "docs/src/components/examples/CompositionYupBasic.vue",
"content": "\n\n\n \n {{ errors.email }}
\n\n \n {{ errors.password }}
\n\n"
},
{
"path": "docs/src/components/examples/CompositionZodBasic.vue",
"content": "\n\n\n \n {{ errors.email }}
\n\n \n {{ errors.password }}
\n\n"
},
{
"path": "docs/src/components/examples/CustomCheckboxInputBasic.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CustomInputBasic.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CustomInputBasicError.vue",
"content": "\n \n \n {{ error }}\n
\n\n\n\n"
},
{
"path": "docs/src/components/examples/CustomInputBasicValueEvent.vue",
"content": "\n \n\n\n\n"
},
{
"path": "docs/src/components/examples/CustomInputFieldAggressive.vue",
"content": "\n \n {{ errorMessage }}\n\n\n\n"
},
{
"path": "docs/src/components/examples/CustomInputFieldBasic.vue",
"content": "\n \n {{ errorMessage }}\n\n\n\n"
},
{
"path": "docs/src/components/examples/CustomInputFieldEager.vue",
"content": "\n \n {{ errorMessage }}\n\n\n\n"
},
{
"path": "docs/src/components/examples/CustomInputFieldMeta.vue",
"content": "\n \n
\n\n\n\n\n\n"
},
{
"path": "docs/src/components/examples/CustomInputFieldMultiErrors.vue",
"content": "\n \n - \n
- {{ error }} \n
\n \n \n
\n \n\n"
},
{
"path": "docs/src/layouts/PageLayout.astro",
"content": "---\nimport path from 'path';\nimport SiteHead from '@/components/SiteHead.astro';\nimport Ad from '@/components/Ad.vue';\nimport SpriteSheet from '@/components/SpriteSheet.astro';\nimport TheHeader from '@/components/TheHeader.vue';\nimport EditPage from '@/components/EditPage.vue';\nimport SponsorButton from '@/components/SponsorButton.vue';\nimport DocMenu from '@/components/DocMenu.vue';\nimport DocToc from '@/components/DocToc.vue';\nimport DocNextStep from '@/components/DocNextStep.vue';\nimport DocSearch from '@/components/DocSearch.vue';\nimport ContentWrapper from '@/components/ContentWrapper.vue';\nimport { buildMenu, Frontmatter } from '@/utils/seo';\nimport '@/styles/tailwind.css';\nimport '@/styles/page.css';\n\nconst { headings, frontmatter } = Astro.props;\nconst filePath = path.relative(path.resolve('../'), frontmatter.file);\n\nconst page = frontmatter as Frontmatter;\n\nconst menu = [\n {\n title: 'resources',\n pages: buildMenu([\n {\n ...(await Astro.glob\n \n \n \n\n {page.next && \n\n \n\n
\n\n \n
\n Error:
\n{{ message }}
\nError:
\n{{ message }}
\nHint: Enter a secure password you can remember
\n\n \n {{ errorMessage }}\n
\n\n\n\n```\n\nWhenever the `value` ref is updated it will be validated and the `errorMessage` ref will be automatically filled with the first error message. Usually you would bind the `value` ref to your inputs using `v-model` or any other means and whenever you want to validate your field you update the `value` binding with the new value.\n\nAdditionally you can use `yup` as a validator:\n\n```vue\n\n```\n\nYou are responsible for when the field validates, blurs or when its value changes. This gives you greater control over the `Field` component which may include or implement sensible defaults for most common use cases.\n\n## Usage with TypeScript\n\nYou can use `useField` with typescript and type the field's value type to ensure safety when manipulating it's value. The `useField` function is a generic function that receives the value type and applies it on the various interactions you have with its API.\n\n```ts\nconst { value, resetField } = useField\n \n {{ errorMessage }}\n
\n\n\n\n```\n\n| Field options |\n| -------------------------------------- |\n| `type` |\n| `label` |\n| `initialValue` |\n| `validateOnMount` |\n| `bails ` |\n| `standalone` |\n| `validateOnValueUpdate` |\n| `keepValueOnUnmount` |\n| `syncVModel` |\n| `checkedValue` (checkbox/radio only) |\n| `uncheckedValue` (checkbox/radio only) |\n"
},
{
"path": "docs/src/pages/api/use-form.mdx",
"content": "---\nlayout: ../../layouts/PageLayout.astro\ntitle: useForm\ndescription: API reference for the useForm composition API function\nmenuTitle: useForm()\norder: 6\n---\n\nimport DocTip from '@/components/DocTip.vue';\nimport CodeTitle from '@/components/CodeTitle.vue';\nimport DocBadge from '@/components/DocBadge.vue';\n\n# useForm\n\n`useForm` is a custom composition API function that allows you to group fields created by `useField` and aggregates their state. It should be used to create logical forms or custom form components similar to the `` component which is just a consumer of `useForm`.\n\n\n\n- Must be inside a `Form` component or a [derivative (using useForm)](/api/use-form#creating-custom-form-components)\n- Must Have the same `name` prop\n- Should have a `type` attribute\n\n
\n\n\n\n- Submitting forms with JavaScript listeners (AJAX)\n- Submitting forms using the classic/native approach (page reload)\n- Handling form resets\n\n
\n\n## Form Values\n\nSo far you probably noticed we didn't use `v-model` once in the examples. This is because in most cases you don't need the model values until you submit them to your API or not at all if you are submitting an HTML form without JavaScript.\n\nHaving to create models just to be able to reference them later is redundant and vee-validate goes around this by creating an internal model for the `\n
\n