Nuxt.js vee-validate IPアドレスのバリデートについて

Question

Nuxt.jsにvee-validateモジュールを使用してのIPアドレスバリデーションを実装したいです。
vee-validateのv2ではIPアドレスの標準バリデートが実装していたのですが、v3では削除されてしまいました。
下記サイトで標準バリデートの再実装で実装できるとあるのですが、わからず苦戦しています。
https://user-first.ikyu.co.jp/entry/2019/12/03/000000

分かる方がいればご回答宜しくお願い致します。

Answer 1

validation.jsを利用する形で参考と同じように記述してもできませんか？

import isIP from 'validator/lib/isIP';
const validate = value => isIP(String(value));

export default {
  validate,
  message: field => `${field}が正しくありません`,
};

Comments

[ctrnn]

ご回答ありがとうございます。
当方経験が浅いため思い違いや記述ミスがあるかもしれませんが、実践した限り
Cannot find module 'validator/lib/isIP'
とのエラーがでます。

モジュールが見つからないというのは分かるのですが、ではどうすればいいのか、どこを参照すればいいのか分からない状況です。引き続きよろしくお願いいたします。

[nt4c]

validator.jsはインストールされてますか？
vee-validateを入れたときと同じようにnpmからvalidator.jsをインストールして再度実行してみてください。
https://www.npmjs.com/package/validator

[ctrnn]

ありがとうございます。
validator.jsを別途インストールする必要があったのですね。その部分は解決しました。
度々すみませんが、veevalidateのv3はValidationProviderタグにrules属性を与えてバリデートするという認識なのですが、今回の場合どのように実装すればいいのでしょうか？
自分でも調べながらやっているのですが情報が少なく、ご教授いただければ幸いです。

[nt4c]

今回で作ったvalidationルールをvee-validateのextendで追加すれば機能として使えるようになると思います。
こちらのような記事を参考にしてみてください
https://qiita.com/sendaiharu1/items/b8a9fc03ff3e6de522a4

[ctrnn]

参考サイトを参考に色々調べながら実装できました。
何から何までありがとうございます。