Official vee-validate Nuxt module
Official vee-validate's Nuxt module
- Auto import of vee-validate components
- Auto import of vee-validate composables
- Detecting if you are using
zodoryupand exposing thetoTypedSchemasuitable for either.
In your nuxt project install the vee-validate nuxt module:
# npm
npm i @zaalbarxx/vee-validate-nuxt
# pnpm
pnpm add @zaalbarxx/vee-validate-nuxt
# yarn
yarn add @zaalbarxx/vee-validate-nuxtThen add the module to your modules config in nuxt.config.ts:
export default defineNuxtConfig({
// ...
modules: [
//...
'@zaalbarxx/vee-validate-nuxt',
],
});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.
You can configure a few aspects of the @zaalbarxx/vee-validate-nuxt module. Here is the config interface:
export default defineNuxtConfig({
// ...
modules: [
//...
[
'@zaalbarxx/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:
export default defineNuxtConfig({
// ...
modules: [
//...
'@zaalbarxx/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',
},
},
});