@vee-validate/nuxt

NuxtでVueフォームを簡単に

21.2万ダウンロード•1.12万スター•v4.15.1

logaretm

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