はじめに Vue.js で作っているプロジェクトでフォームを作る場合には、バリデーションの実装を VeeValidate を用いることが多いです。 VeeValidate: http://vee-validate.logaretm.com/ 非常に便利なプラグインなのですが、デフォルト設定のまま利用するとフォーム1つに対してのバリデーションチェックのみしか出来なかったり、Atomic Design でフォームの input, select 要素を custom component にした場合に動作しなかったりと、 実運用でハマりポイントがいくつかあるので段階をおって説明したいと思います。 作るもの 注文入力欄 入力必須 最大文字数: 10文字 Level 1 デフォルトルールで特にコンポーネントを分ける必要が無い場合。 画面側 <template> <input v-validate="{