Chrome extensionの開発でVue.jsを使用したときの国際化対応方法についてのメモ
基本的なi18nの対応方法
vue-plugin-webextension-i18nをインストールする
% npm install --save-dev vue-plugin-webextension-i18n
Vueのインスタンスにプラグインを追加する
import i18n from 'vue-plugin-webextension-i18n'
Vue.use(i18n);
manifest.jsonに以下を記述する
...
default_locale: "en",
...
リソースファイルを配置する
manifest.jsonと同じ階層に_localesというフォルダを作り、さらにその下にlocaleごとのフォルダを配置する。
% tree -L 1
.
├── _locales
├── assets
├── common
├── config
├── ...
└── manifest.json
% tree ./_locales/
./_locales/
├── en
│ └── messages.json
└── ja
└── messages.json
リソースファイル（messages.json)に文言を追加する
- en/messages.json
{
"save": {
"message": "Save"
}
}
- ja/messages.json
{
"save": {
"message": "保存"
}
}
Vueコンポーネント側からリソースファイルを使用する
以下のように記述することで、messages.jsonに足した文言にアクセスできる。
<button>{{ $i18n('save') }}</button>
Tips
Formatsの機能を使う
- 言語によって語順が異なり、文言の中に変数を埋め込みたい場合は、以下のように記述できる。
messages.json
...
},
"showItems": {
"message": "Show $NUMBER$ items",
"placeholders": {
"number": {
"content": "$1",
"example": 2
}
}
},
...
Vue component
{{ $i18n('showItems', [itemLength]) }}
※第2引数は配列になっており、[A, B, C]と記述したらmessages.json側では \$1, \$2, $3に渡る