ド素人のフロントエンド開発系の記事第2弾です。
Nuxt.jsでフォームのバリデーションメッセージを国際化対応しようとした際のハマりメモです。
概要
まずは簡単にパッケージの紹介です。
パッケージ紹介
vee-validate
vee-validateは、Vue.js用のテンプレートベースのフォームバリデーションを提供してくれるフレームワークです。UIフレームワークとのVuetifyとの連動もオフィシャルサイトにサンプルが載っていたりと親和性が高いと感じています。
nuxt-i18n
nuxt-i18nはVue.js用の国際化プラグインであるvue-i18nをNuxt.js用にラップしたようなパッケージです。名前の通り国際化（多言語化）するための機能を提供してくれます。細かな挙動はオプションで変えられますが、よくある大規模サイトのように言語を画面上から切り替えるような実装も簡単にNuxt.js上で実現できます。
nuxt-validate
そして、最後にnuxt-validateです。vee-validateをNuxt.jsで簡単に利用できるようにしてくれます。（nuxt.config.js内の設定で言語指定やバリデーションルールの選択ができる）
ただ、このパッケージは多言語対応するアプリケーションで真価を発揮すると思われます。先に紹介したvee-validateのバリデーションのエラーメッセージをnuxt-i18nと良しなに連動して、ユーザが画面上で選択している言語で表示してくれるからです。自前でやろうとすると、ごりごりプラグイン書いたりと初心者に優しくない。
vee-validate2向け
vee-validate3向け
前提・環境
この記事を執筆した際に利用したバージョン情報です。準備が整ったら実際に動作するサンプルをGitHubに上げようと思っています。
問題
nuxt-i18nの機能で画面上で言語を切り替えられるようになったのに、vee-validateのバリデーションメッセージだけ切り替わらない。。
解決方法
nuxt-validateにはlangオプションがあり、使用する言語を指定することができます。
しかし、nuxt-i18nと連動させて、nuxt-i18n上で言語を切り替えた場合にvee-validateのバリデーションメッセージの言語も切り替えたい場合、下記のようにlangオプションを指定してしまうと、vee-validateのバリデーションメッセージだけlangオプションで指定した言語に固定されてしまいます。
nuxtValidate: {
lang: 'ja',
nuxti18n: true
}
そこで、nuxt-i18nの言語の切り替えと併せてvee-validateのバリデーションメッセージの言語も切り替えるには、下記のようにlangオプションを指定しないようにします。
nuxtValidate: {
nuxti18n: true
}
なお、原因について触れておくと、nuxt-validateが生成するvee-validate.jsのテンプレートを見たら分かったのですが、下記の通りlangオプションを指定した際は、指定した言語を使用してメッセージを明示してしまうためだと思われます。
<% if (options.lang) { %>
extend(rule, {
...rules[rule],
message: <%= options.lang %>.messages[rule]
});
<% } else { %>
extend(rule, rules[rule])
<% } %>
まあ、langオプションがデフォルトの言語だとは一言も書かれていないので文句は言えないですが。。何気なく指定した場合はハマるかもですね。。自分だけですかね。。
nuxt-i18n側にデフォルトの言語設定あるしそりゃあそうか。。
おまけ
vee-validate3系向けのオフィシャルの説明に誤りがある
GitHubのmasterブランチでは修正されていましたが、npmjs.comのサイト上ではまだ古い内容だったので、一応共有しておきます。
nuxt.config.js（またはts）上で個別にインストールするvee-validateのバリデーションルールを指定する際のサンプルが下記のようにnuxti18配下に定義されていますが、
nuxti18n: {
rules: ['alpha_dash', 'min']
}
正しくは、nuxtValidateの直下に定義する必要があります。（バリデーションルールは多言語化対応時に限った概念ではないので、当然といえば当然ですが。。）
nuxtValidate: {
rules: ['alpha_dash', 'min']
}
コメント