nuxt-validateで多言語対応する際のハマりポイント

フロントエンド開発
この記事は約5分で読めます。

ド素人のフロントエンド開発系の記事第2弾です。

Nuxt.jsでフォームのバリデーションメッセージを国際化対応しようとした際のハマりメモです。

概要

まずは簡単にパッケージの紹介です。

パッケージ紹介

vee-validate

vee-validateは、Vue.js用のテンプレートベースのフォームバリデーションを提供してくれるフレームワークです。UIフレームワークとのVuetifyとの連動もオフィシャルサイトにサンプルが載っていたりと親和性が高いと感じています。

VeeValidate
Template Based Form Validation Framework for Vue.js

nuxt-i18n

nuxt-i18nはVue.js用の国際化プラグインであるvue-i18nをNuxt.js用にラップしたようなパッケージです。名前の通り国際化(多言語化)するための機能を提供してくれます。細かな挙動はオプションで変えられますが、よくある大規模サイトのように言語を画面上から切り替えるような実装も簡単にNuxt.js上で実現できます。

nuxt-i18n | nuxt-i18n
i18n for Nuxt

nuxt-validate

そして、最後にnuxt-validateです。vee-validateをNuxt.jsで簡単に利用できるようにしてくれます。(nuxt.config.js内の設定で言語指定やバリデーションルールの選択ができる)

ただ、このパッケージは多言語対応するアプリケーションで真価を発揮すると思われます。先に紹介したvee-validateのバリデーションのエラーメッセージをnuxt-i18nと良しなに連動して、ユーザが画面上で選択している言語で表示してくれるからです。自前でやろうとすると、ごりごりプラグイン書いたりと初心者に優しくない。

注意としては、2020年1月現在、オリジナルのnuxt-validateはvee-validate2系にしか対応しておらず、vee-validate3系と組み合わせる場合はForkされた別のnuxt-validateを使用する必要があります。

vee-validate2向け
nuxt-validate
Simple Nuxt input validation module using vee-validate
vee-validate3向け
@mole-inc/nuxt-validate
Simple Nuxt input validation module using vee-validate

前提・環境

この記事を執筆した際に利用したバージョン情報です。準備が整ったら実際に動作するサンプルをGitHubに上げようと思っています。

  • Nuxt.js 2.11.0
  • vee-validate 3.2.1
  • nuxt-i18n 6.4.1
  • nuxt-validate 1.1.0 (@mole-inc)

問題

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の全てのバリデーションルールをインストールしてしまうので、rulesオプションで使用するルールを絞っておくと良さそうです。

なお、本記事の最後で軽く触れますが、rulesオプションの指定の仕方にも注意があるので、指定する場合は併せてご参照ください。

なお、原因について触れておくと、nuxt-validateが生成するvee-validate.jsのテンプレートを見たら分かったのですが、下記の通りlangオプションを指定した際は、指定した言語を使用してメッセージを明示してしまうためだと思われます。

<% if (options.lang) { %>
  extend(rule, {
    ...rules[rule],
    message: <%= options.lang %>.messages[rule]
  });
<% } else { %>
  extend(rule, rules[rule])
<% } %>
mole-inc/nuxt-validate
Simple Nuxt input validation module using VeeValidate 3 - mole-inc/nuxt-validate

まあ、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']
}

コメント

タイトルとURLをコピーしました