mcpField
V
vee-validate-skilld

vee-validate-skilld

github.com/skilld-dev開発184186 回インストール3 週間前に更新
リポジトリ

vee-validate-skilld について

vee-validate-skilldは、vee-validate 4.15.1でフォームを検証するVue 3開発者向けのリファレンスです。Composition APIや宣言的コンポーネント、フィールドパス、検証モード、実装時の注意点を解説します。

主な機能

  1. 01Composition APIによるフォーム管理
  2. 02FormとFieldの宣言的コンポーネント
  3. 03フィールドと配列フィールドの管理
  4. 04Yup、Zod、Valibotのスキーマアダプター
  5. 05検証タイミングとエラー処理

活用シーン

  1. 01Vue 3アプリでフォーム検証を実装
  2. 02ネストしたオブジェクトや配列フィールドを処理
  3. 03TypeScriptフォームに型付きスキーマを設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/skilld-dev/vue-ecosystem-skills --skill vee-validate-skilld

インストール後、Claude Code で/vee-validate-skilldを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
api-surface.md
components.md
composition-api.md
pitfalls.md
validation.md
version-changes.md

詳細

vee-validate 4.15.1

Vue 3 向けのフォームバリデーションです。以下の情報は、準備されたソース（dist/vee-validate.d.ts、dist/vee-validate.mjs、package.json）および公式ドキュメント（https://vee-validate.logaretm.com/v4/）に基づいています。

環境

  • パッケージは [email protected] です（package.json:3）。ピア依存関係として vue ^3.4.26 が必要です（package.json:42）。
  • ESM と CJS に対応し、sideEffects: false で、エントリーポイントは vee-validate のみです（package.json:11-26）。
  • v4 は Vue 3 のみをサポートします。Vue 2 には vee-validate 2.x/3.x が必要です（README:69-72）。
  • スキーマアダプターは別パッケージとして提供されています：@vee-validate/yup、@vee-validate/zod、@vee-validate/valibot。グローバルルールは @vee-validate/rules、メッセージは @vee-validate/i18n にあります。

2 種類の API スタイル

Composition API（新しいコードで推奨）。 useForm + defineField + handleSubmit：

<script setup>
import { useForm } from 'vee-validate';

function required(value) {
  return value ? true : 'This field is required';
}

const { defineField, handleSubmit, errors } = useForm({
  validationSchema: { field: required },
});

const [field, fieldProps] = defineField('field');

const onSubmit = handleSubmit(values => {
  console.log(values);
});
</script>

<template>
  <form @submit="onSubmit">
    <input v-model="field" v-bind="fieldProps" />
    <span>{{ errors.field }}</span>
    <button>Submit</button>
  </form>
</template>

出典：README:84-118、https://vee-validate.logaretm.com/v4/guide/composition-api/getting-started/

宣言的コンポーネント。 スコープ付きスロットを使った Form + Field：

<script setup>
import { Field, Form } from 'vee-validate';

function required(value) {
  return value ? true : 'This field is required';
}

function onSubmit(values) {
  console.log(values);
}
</script>

<template>
  <Form v-slot="{ errors }" @submit="onSubmit">
    <Field name="field" :rules="required" />
    <span>{{ errors.field }}</span>
    <button>Submit</button>
  </Form>
</template>

出典：README:122-153、https://vee-validate.logaretm.com/v4/guide/components/handling-forms/

基本ルール

検証モード

グローバルのデフォルト値は、validateOnBlur: true、validateOnChange: true、validateOnInput: false、validateOnModelUpdate: true、bails: trueです。configure()でグローバルに変更できます。なお、これら4つのトリガーフラグは<Field>コンポーネントにのみ適用され、useFieldには適用されません（https://vee-validate.logaretm.com/v4/api/configuration/）。送信時のみ検証するには、`defineField`の設定でフィールドごとに入力／変更／フォーカスアウトのトリガーを無効にするか、グローバルに無効にします（https://github.com/logaretm/vee-validate/discussions/4903）。

参考資料

  • Composition API：useForm、defineField、useField、useFieldArray、状態およびセッターのコンポーザブル、フォームコンテキスト。
  • コンポーネント：Form、Field、FieldArray、ErrorMessageのprops、スロット、レンダリング、v-modelのルール。
  • 検証：バリデーター関数、オブジェクトスキーマ、型付きスキーマ、グローバルルール、i18n、単独で使用するvalidateユーティリティ。
  • APIの概要：すべてのランタイムエクスポートと主な型。dist/vee-validate.d.tsを参照。
  • バージョンごとの変更点：4.9.0から4.15.1までのAPI追加、破壊的変更、非推奨化。
  • 注意点：コンポジションに関する注意事項、ネストされたパスのルール、配列フィールド、既知の未解決課題。

コメント

Markdown 対応