@vee-validate/nuxt

> Official vee-validate Nuxt module

Official vee-validate's Nuxt module

Features

- Auto import of vee-validate components
- Auto import of vee-validate composables
- Detecting if you are using zod or yup and exposing the toTypedSchema suitable for either.

Getting Started

In your nuxt project install the vee-validate nuxt module:

``sh


npm

npm i @vee-validate/nuxt

pnpm

pnpm add @vee-validate/nuxt

yarn

yarn add @vee-validate/nuxt
`

Then add the module to your modules config in nuxt.config.ts:

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

Types

No types are exposed by default to avoid having conflicts with other libraries, aside from vee-validate's main API components/composables. You can still import them via vee-validate.

Configuration

You can configure a few aspects of the @vee-validate/nuxt module. Here is the config interface:

`ts
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',
},
},
],
],
});
`

You can also use the veeValidate config key instead of the array syntax:

`ts
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',
},
},
});
``