@zaalbarxx/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 @zaalbarxx/vee-validate-nuxt

# pnpm
pnpm add @zaalbarxx/vee-validate-nuxt

# yarn
yarn add @zaalbarxx/vee-validate-nuxt

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

export default defineNuxtConfig({
  // ...
  modules: [
    //...
    '@zaalbarxx/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 @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',
    },
  },
});