vue-i18nを使用してVue.jsにi18nを実装する

投稿日: 2022-04-20 2022-10-07
タグ: Vue.js

今日は、Vueアプリでi18nの国際化を実装する方法について説明します。 Vue.jsに取り組んでいるコア開発者の1人である川口和也によって書かれたvue-i18nプラグインを使用します。。

Webアプリで国際化サポートを提供することは、それらを世界中のユーザーが利用できるようにするために不可欠です。世界中の多くの人々が英語を話したり理解したりできますが、i18nサポートを追加することで、アプリケーションをより多くのユーザーに公開しています。

アプリのセットアップ

まず、単純なVueアプリを既に作成していることを前提としています。次に、お好みの方法を使用してvue-i18nプラグインを追加します。

# Yarn
$ yarn add vue-i18n

# npm
$ npm install vue-i18n

# Vue CLI 3.x+
$ vue add i18n

以下では、基本的なVueアプリをセットアップします。プラグインを実際に利用せずにプラグインしていることに気付くでしょうが、これにより、i18nサポートを追加する前にアプリがどのように動作するかがわかります。

main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import App from './App.vue';

Vue.use(VueI18n);

new Vue({
  render: h => h(App),
}).$mount('#app');

App.vue

<template>
  <div id="app">
    <HelloGator />
  </div>
</template>

<script>
import HelloGator from './components/HelloGator.vue'

export default {
  name: 'App',
  components: {
    HelloGator
  }
}
</script>

components / HelloGator.vue

<template>
  <div>Hello, Gator</div>
</template>

<script>
export default { name: 'Gator' }
</script>

フォーマット

vue-i18n プラグインを使用すると、単純な単一ブラケット構文で文字列をフォーマットできます。ここに追加しています messages 現在の状況に応じて翻訳する必要のある文字列をアプリに提供するオブジェクト locale. 初期化する new VueI18n インスタンスを作成し、それをVueインスタンスに渡します。

main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import App from './App.vue';

Vue.use(VueI18n);

const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!'
    }
  },
  de: {
    message: {
      hello: 'Guten Tag, {name}!'
    }
  }
};

const i18n = new VueI18n({
  locale: 'en',
  messages
});

new Vue({
  render: h => h(App),
  i18n
}).$mount('#app');

コンポーネントでアプリ文字列を使用するために、vue-i18nは関数を提供します $t() これは、指定されたキーの現在のロケールに基づいた翻訳を提供します。この場合、私たちは要求しています message.hello 文字列とそれにテンプレート変数を提供する name.

テンプレート：components / HelloGator.vue

<template>
  <div>{{ $t('message.hello', { name: 'Gator' }) }}</div>
</template>

デフォルトで en ロケール、あなたは見るべきです Hello, Gator! 画面にレンダリングされます。

ロケールの変更

ここで、アプリ文字列を追加した他のロケールにアクセスしたり、変更したりする方法について疑問に思われるかもしれません。ドイツ語ロケールのサポートを追加しました de 初期設定で。 vue-i18n プラグインは、コンポーネントにアクセスを提供します i18n インスタンスを介して $i18n 変数。設定するだけ $i18n.locale 新しいロケールに切り替えます。

その場でロケールを切り替えることができるコンポーネントを追加しましょう。

components / SelectLocale.vue

<template>
  <div>
    <select v-model="$i18n.locale">
      <option
        v-for="(lang, i) in langs"
        :key="`lang-${i}`"
        :value="lang"
      >
        {{ lang }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'SelectLocale',
  data() {
    return { langs: ['en', 'de'] }
  }
}
</script>

テンプレート：App.vue

<template>
  <div id="app">
    <SelectLocale />
    <HelloGator />
  </div>
</template>

スクリプト：App.vue

import HelloGator from './components/HelloGator.vue'
import SelectLocale from './components/SelectLocale.vue'

export default {
  name: 'App',
  components: {
    HelloGator,
    SelectLocale
  }
}

これで、アプリのリロード後、 <select> 現在のロケールを変更できる要素。選択したロケールを次のように変更してみてください de レンダリングされた出力がどのように変化するかを確認するには Guten Tag, Gator!.

まとめ

vue-i18n プラグインは、既存のVueアプリに国際化を簡単に追加するための優れたソリューションです。これは、すべてではないにしてもほとんどのi18nの懸念事項をカバーする多くの機能を備えた、優れた本番環境対応のライブラリです。いつものように、プラグインのドキュメントをチェックして、プラグインが提供するすべての機能の感触をつかんでください。

getdocs

13036