Nuxt.js, nuxt-i18n, VeeValidate で多言語対応する方法を検索すると、自前で plugin を設置するものが多いのですが、最新（2019年06月28日現在）の nuxt-validate を使ってもできるようにしてあるので、やり方をまとめます。
VeeValidate がバージョン3になる前の記事なので最新のVeeValidateでは動作しないコードが含まれています。
インストール
Nuxt.js などはインストールしてある前提です。
npm i --save nuxt-validate nuxt-i18n
nuxt-validate は 1.0.0 以降のものが nuxt-i18n 対応版です。
nuxt.config.js の編集
modules に nuxt-i18n, nuxt-validate の追加と、設定を書きます。
注意するところとしては、nuxt-validateにnuxti18nオプションを指定すること、nuxt-validateをnuxt-i18nより前に記述すること、nuxt-i18nとのlocale名の対応に気をつけることです。
nuxti18n: trueと設定した場合、nuxt-i18nで設定したlocale codeと同名のファイルを、VeeValidateのlocaleからロードします。
なので、 ja, en, fr など言語コードのみの場合は問題ないですが、ポルトガル語（ポルトガル、ブラジル）や中国語（繁体、簡体）などは、nuxt-i18nでのlocale codeをVeeValidate側に合わせるか、以下のようにlocale名の対応を取るための設定値を記述する必要があります。（変換が必要でない場合は記述する必要はありません。）
modules: [
// nuxt-validateの設定（nuxt-i18nより前に書く）
// https://github.com/lewyuburi/nuxt-validate#configuration
[
"nuxt-validate",
{
nuxti18n: {
locale: {
// nuxt-i18n と VeeValidate のlocale名の差分を埋めるための設定
// nuxt-i18n の locale : VeeValidate の locale
"pt-BR": "pt_BR"
}
}
}
],
// nuxt-i18nの設定
// https://nuxt-community.github.io/nuxt-i18n/options-reference.html
[
"nuxt-i18n",
{
locales: [
"ja", "en", "pt-BR"
],
defaultLocale: "ja",
vueI18n: {
fallbackLocale: "ja",
}
}
],
//
],
要素名の多言語化
<input v-validate="'required'" name="myinput" type="text">
<span>{{ errors.first('myinput') }}</span>
上記の対応をしてバリデーションエラーがあった場合、以下の出力がされます。
myinputは必須項目です
この myinput の部分も多言語化したい場合は、いくつかやり方があります。
data-vv-as を利用する方法
<template>
<div>
<input v-validate="'required'" :data-vv-as="myinput" name="myinput" type="text">
<span>{{ errors.first('myinput') }}</span>
</div>
</template>
<script>
export default {
computed: {
myinput() {
if (this.$i18n.locale === "ja") {
return "マイインプット"
}
// ...
return "MyInput"
}
}
}
</script>
マイインプットは必須項目です
plugin を設置する方法
nuxt-validate は app context に Validator API を inject してあるので、 plugin で使用することができます。
plugins: [
"@/plugins/attributes.js"
],
export default ({ app }, inject) => {
app.validator.localize({
ja: {
attributes: {
myinput: "マイインプット"
}
},
en: {
attributes: {
myinput: 'MyInput'
}
},
// ...
})
}
<template>
<div>
<input v-validate="'required'" name="myinput" type="text">
<span>{{ errors.first('myinput') }}</span>
</div>
</template>
マイインプットは必須項目です