@vee-validate/nuxt

官方 vee-validate Nuxt 模組

官方 vee-validate 的 Nuxt 模組

功能特色

自動匯入 vee-validate 元件
自動匯入 vee-validate composables
偵測您是否正在使用 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 元件/composables。您仍然可以透過 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',
    },
  },
});