vee-validate
@vee-validate/nuxt

让 Nuxt 中的 Vue 表单开发变得简单
217K 下载量11.2K 星标v4.15.1
logaretmlogaretm

@vee-validate/nuxt

vee-validate 官方 Nuxt 模块

vee-validate 官方 Nuxt 模块

功能

  • 自动导入 vee-validate 组件
  • 自动导入 vee-validate 可组合项
  • 检测你是否正在使用 zod 或 yup，并暴露适用于两者的 toTypedSchema。

开始使用

在你的 Nuxt 项目中安装 vee-validate Nuxt 模块

# npm
npm i @vee-validate/nuxt

# pnpm
pnpm add @vee-validate/nuxt

# yarn
yarn add @vee-validate/nuxt

然后将该模块添加到你的 nuxt.config.ts 中的 modules 配置中

export default defineNuxtConfig({
  // ...
  modules: [
    //...
    '@vee-validate/nuxt',
  ],
});

类型

默认情况下，除了 vee-validate 的主要 API 组件/可组合项之外，不暴露任何类型，以避免与其他库发生冲突。你仍然可以通过 vee-validate 导入它们。

配置

你可以配置 @vee-validate/nuxt 模块的几个方面。这是配置接口

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

你也可以使用 veeValidate 配置键，而不是数组语法

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