data codes through eyeglasses

Nuxt3でvee-validate4(Composable API)を使う

引き続きNuxt3のトピックです。

Vue3のUIフレームワークであるvee-validateの組み合わせでフォームのバリデーションを組んでみます。というのも、vee-validate4の使用について少しハマってしまったので、その備忘録をかねて記述しています。

インストールと設定

Nuxt3とvee-validate4をインストールします。

今回は、i18nとルール、それからsassも一緒に入れておきます。

また、プラグイン定義でルールやロケールを設定します。

Filedのバリデーション

実際の使用例を見てみてます。今回の記事では、Composable APIを使うケースを想定しています。

useFieldでフォームフィールドごとの定義をしています。useFieldは、valueやerrorMessageといったオブジェクトを返します。

実際に動かした画面は以下のようになります。

Formのバリデーション

続いてFormのケースです。useFormというComposable APIを使います。

useFieldで定義していたバリデーションをuseFormで指定しています。useFieldは、useFormのformを自動的に検出してくれます。実際には、provide/injectの仕組みが内部で使用されており、useFormやuseFieldの呼び出し時にそれぞれ固有のSymbolでコンテキストがprovideされています。useFieldは、useFormでprovideされたformコンテキストを自身のコンポーネント内でinjectしています。そのため、上記の例で言うと、useFieldを先に呼び出し、useFormを後で呼び出すとuseFieldがformコンテキストを探せず期待した動きにならないことがあります(私自身ややハマってしまった)。初回表示時にuseFormがfieldを見つけられずエラーと扱ってしまいます。

実際に上記例を動かすと、ページ表示時にバリデーションエラーが表示されてしまい期待した動きになりませんでした。

まとめ

Nuxt3とvee-validateの組み合わせを試してみました。Composable APIで簡単にフォームバリデーションを導入することができます。

本サンプルは以下になります。

https://github.com/moritetu/nuxt3-vee-validate-sample

参考リンク

カテゴリー: NuxtJS | タグ: | 投稿日: | 投稿者:

byebyehaikikyou について

産業機械系エンジニア→アフィリエイトWeb広告系のアプリ開発→PostgreSQL周辺機能の開発→企画開発(現在ここ) 地方でITエンジニアをしています。Webやスマフォアプリ、Hadoopなどのビッグデータに関するシステムに関わり、現在は企画開発などの業務。 日々のインプットを発信してます。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください