nuxt-i18n+vee-validateでの多言語対応

Qiita初投稿なのでよくわかってないですが
vee-validateの公式見て妙に詰まったので自分用備忘録として

説明しないこと

• nuxt-i18nやvee-validateのインストール方法
• vee-validateのテンプレートでの使用方法

環境

    "nuxt": "^2.14.0",
    "nuxt-i18n": "^6.15.1",
    "vee-validate": "^3.3.11",

i18n設定

~/nuxt.config.js

import i18n from './nuxt-i18n.config'
export default {
  ...
  modules: [
    ...
    ['nuxt-i18n', i18n],
  ],

~/nuxt-i18n.config.js
fileは使わずvueI18nに言語ファイルを指定する

import messages from './src/locales/message'

export default {
  locales: [
    { code: 'ja', name: 'Japanese', iso: 'ja_JP' }, // fileを使って言語ファイルは読まない
    { code: 'en', name: 'English', iso: 'en-US' },
  ],
  defaultLocale: 'ja', // デフォルトの言語
  strategy: 'prefix_and_default', // URLに言語のプレフィックスを追加するかの指定
  vueI18n: {
    // 翻訳ファイルが見つからなかった場合の言語を指定
    fallbackLocale: 'ja',
    messages,  // ←各言語ファイルはここで読み込む
  },
  rootRedirect: 'ja',
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'i18n_locale',
  },
}

~/src/locales/message.js
言語ファイルは管理のしやすいようにページ単位で作成したものを結合
そこにvalidation用のファイルも作成

import TopEn from './en/top'                  // TOPページ用
import ValidationEn from './en/validation'    // validation用

import TopJa from './ja/top'
import ValidationJa from './ja/validation'

export default {
  en: {
    ...TopEn,
    ...ValidationEn,
  },
  ja: {
    ...TopJa,
    ...ValidationJa,
  },
}

~/src/locales/en/validation.js
vee-validationのlocalesファイルを読み込んでmessagesに組み込む
カスタムルールのメッセージや変数名もここで定義(password)
既存ルールのメッセージ上書きも可能(excluded)

import ValidateMessage from 'vee-validate/dist/locale/ja'

export default {
  validations: {
    fields: {
      user_name: 'ユーザ名',
      password: 'パスワード',
    },
    messages: {
      ...ValidateMessage.messages,
      password: 'パスワードの形式が正しくありません。',
      excluded: '既に使用されています。',
    },
  },
}

veeValidate設定

~/nuxt.config.js
プラグインとして追加

export default {
  ...
  plugins: [
    ...
    { src: '~plugins/validation/vee-validate' },
  ],

~/src/plugins/validation/vee-validate.js
ポイントとしてvee-validate公式のlocales設定を使用した多言語化は行わない
※言語を変更した時にエラーメッセージの再生成をしないと切り替わらないため

import Vue from 'vue'
import {
  ValidationProvider,
  ValidationObserver,
  extend,
  configure,
} from 'vee-validate'

// vee-validateのすべてのルールを読み込んでexportする
import * as rules from 'vee-validate/dist/rules'
// 公式に無いカスタムルールを作成した場合はそれらも読み込む
import * as CustomRules from './custom-roles.js'

Object.keys(rules).forEach((rule) => {
  extend(rule, rules[rule])
})
Object.keys(CustomRules).forEach((rule) => {
  extend(rule, CustomRules[rule])
})

Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)

// locales以下のvalidation.jsで指定した定数を使用してエラーメッセージを生成する
export default function VeeValidatePlugin({ app }) {
  configure({
    defaultMessage: (field, values) => {
      values._field_ = app.i18n.t(`validations.fields.${field}`)
      return app.i18n.t(`validations.messages.${values._rule_}`, values)
    },
  })
}

完了！

---

nuxt.js使い始めて数日なのでこれが正しいやり方なのかはわからないですが
URLで言語切り替えてエラーメッセージが切り替わったので現状良しとする
.