@vee-validate/nuxt

Painless Vue forms for Nuxt

157.4K downloads•11K stars•v4.15.0

logaretm

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

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

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