2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsを使用して書いたChrome extensionにおけるi18n対応

Last updated at Posted at 2020-02-28

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に渡る

参考

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?