Nuxt.js + nuxt-i18n + VeeValidateの適用...

VeeValidateにnuxt-i18nを適用する#

うーん... 今回解決しなければならない問題は、VeeValidateにnuxtのi18nを適用することなのだが..
思ったよりかなり難しそうだ...

https://qiita.com/keiichi-hikita/items/9d5742f1cc06fd0d5707
https://www.virment.com/how-to-use-veevalidate-nuxtjs/

まず、nuxt-i18nの場合は、Laravelのバックエンドでjsファイルを生成して組み込むことになる..
実際にLaravelでも使われるvalidationの内容がある。

最初はこの二つを合わせようとしたのだが、minなどの場合、Laravelはもう少しいろいろなものをサポートしているため、同時に利用するには少し修正が必要そうだったので、実際のところ二つを利用するには自分の実力が足りなかった..

plugins / vee-validate.jsファイルを作成してから、

import { extend, configure } from "vee-validate";
import * as rules from 'vee-validate/dist/rules'

configure({

  defaultMessage: (field, values) => {
    // override the field name.
    values._field_ = $nuxt.$t(`fields.${field}`);
    values.attribute = $nuxt.$t(`fields.${field}`);

    return $nuxt.$t(`validation.${values._rule_}`, values);
  }
});

for (let rule in rules) {
  extend(rule, rules[rule])
}

を通じて使っていた。
attributeを使うLaravelに合わせて該当する値を渡し、 $nuxt.$ tでnuxt-i18nを使って翻訳した...

最初はextendが重複して処理され、先に処理されたもののせいで正しく適用されないものがあったため、かなり時間を無駄にしたが、とにかく成功したと言える..

しかし、このまま使おうかと思ったものの、、、別の方法を使おうかと思い、ほかの方法も調べてみた。

https://logaretm.github.io/vee-validate/examples/i18n.html#localize-api

import en from 'vee-validate/dist/locale/en.json'
import ko from 'vee-validate/dist/locale/ko.json'
import ja from 'vee-validate/dist/locale/ja.json'

// Install English and Arabic localizations.
localize({
  en: {
    messages: en.messages,
    names: {
      email: "Email",
      password: "Password",
      nickname: "Nickname",
    }
  },
  ko: {
    messages: ko.messages,
    names: {
      email: "이메일",
      password: "비밀번호",
      nickname: "닉네임",
    }
  },
  ja: {
    messages: ja.messages,
    names: {
      email: "メール",
      password: "パスワード",
    }
  },
});

let LOCALE = "en";

// A simple get/set interface to manage our locale in components.
// This is not reactive, so don't create any computed properties/watchers off it.
Object.defineProperty(Vue.prototype, "locale", {
  get() {
    return LOCALE;
  },
  set(val) {
    LOCALE = val;
    localize(val);
  }
});

で解決しようとしたが.... 一か所で直接管理できないという欠点が生じた...
nuxt-i18nで言語を切り替えるときに、localizeを呼び出して、vee-validateの言語セットも切り替えればいいのだが.....

うーん... 悩んだ末に、前者の方法を選ぶことにした..

こうして、、、以前保存してあったen.json、ko.json、ja.jsonをLaravelのlangファイルに変換して保存しておいた..

でもここでは「項目のサイズは:sizeKBより小さくなければなりません。」なのだが、ここは:sizeだけであるべきなのに...
:sizeKBが{sizeKB}として処理されてしまう問題が発生する...
この問題は後ででも見つけて解決しておかなければならなさそうだ...

正直、何が正しいのかよく分からない...

とりあえずvee-validateも3.0としてリリースされてからまだ数日しか経っていないので、
自分のやり方が本当に正しいのかもよく分からない...
でも、とりあえず動いているので..先に進むことにしよう..

後でvue 3も出るそうだが..とにかく、、ひとまずこの方法で進めることにしよう..
次に完全に作り直すことになったときに、もっと細かくやることにして..
今は実力不足で、これ以上手を加えるには時間がかかりすぎそうなので、そのままパス

VeeValidateにnuxt-i18nを適用する#

ほかの記事