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

1# npm
2npm i @zaalbarxx/vee-validate-nuxt
3
4# pnpm
5pnpm add @zaalbarxx/vee-validate-nuxt
6
7# yarn
8yarn add @zaalbarxx/vee-validate-nuxt

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

1export default defineNuxtConfig({
2  // ...
3  modules: [
4    //...
5    '@zaalbarxx/vee-validate-nuxt',
6  ],
7});

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:

1export default defineNuxtConfig({
2  // ...
3  modules: [
4    //...
5    [
6      '@zaalbarxx/vee-validate-nuxt',
7      {
8        // disable or enable auto imports
9        autoImports: true,
10        // Use different names for components
11        componentNames: {
12          Form: 'VeeForm',
13          Field: 'VeeField',
14          FieldArray: 'VeeFieldArray',
15          ErrorMessage: 'VeeErrorMessage',
16        },
17      },
18    ],
19  ],
20});

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

1export default defineNuxtConfig({
2  // ...
3  modules: [
4    //...
5    '@zaalbarxx/vee-validate-nuxt',
6  ],
7  veeValidate: {
8    // disable or enable auto imports
9    autoImports: true,
10    // Use different names for components
11    componentNames: {
12      Form: 'VeeForm',
13      Field: 'VeeField',
14      FieldArray: 'VeeFieldArray',
15      ErrorMessage: 'VeeErrorMessage',
16    },
17  },
18});