@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:

# npmnpm i @vee-validate/nuxt# pnpmpnpm add @vee-validate/nuxt# yarnyarn add @vee-validate/nuxt

Then add the module to your modules config in nuxt.config.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:

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:

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