【Vue】vue-i18n / 国際化 ～ 入門編 ～

Vue

■ はじめに

Vue で、国際化（他言語化）を行う際に
vue-i18n を使うようなので、メモ。

目次

【１】そもそも i18n とは？
【２】環境設定
【３】$t("キー")について
【４】サンプル

【１】そもそも i18n とは？

i18n とは、internationalization（国際化）の略。
⇒ i (nternationalizatio = 18文字) n だから。

ちなみに、L10N は、localization（地域化）らしい。

【２】環境設定

以下のコマンドで、インストールする。
~~~~~~~~
npm install vue-i18n
~~~~~~~~

【３】$t("キー") について

$t("キー") で、メッセージファイルの値を取得する

サンプルより

* 以下の「【４】サンプル」より抜粋

ja.json 

{
  "hello": {
    "title": "こんにちは",
・・・略・・・

Hello.vue 

・・・略・・・
    <p>{{ $t("hello.title") }}</p> <=「こんにちは」が表示
・・・略・・・

【４】サンプル

https://dk521123.hatenablog.com/entry/2020/12/22/192553

の「例：vue create コマンド」で作成したプロジェクトをベースに行う。

フォルダ構成 

my-app << 対象プロジェクト
 + src
  |  + views
  |   |  + Hello.vue << 新規追加
  |   | 
  |  + locales << 新規追加
  |      + ja.json << 新規追加
  |      + en.json << 新規追加
 + main.ts

main.ts (修正) 

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
// ★追加 -- ここから
import VueI18n from 'vue-i18n';
// 言語の設定
Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'ja', // ← ここを「en」に切り替えれば英語になる
  fallbackLocale: 'ja',
  messages: {
    ja : require('./locales/ja.json'),
    en : require('./locales/en.json')
  }
});
// ★追加 -- ここまで

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  i18n, // ★追加
  render: h => h(App)
}).$mount('#app')

ja.json 

{
  "hello": {
    "title": "こんにちは",
    "subtitle": "世界"
  }
}

en.json 

{
  "hello": {
    "title": "Hello",
    "subtitle": "World"
  }
}

Hello.vue 

<template>
  <div>
    <p>{{ $t("hello.title") }}</p>
    <p>{{ $t("hello.subtitle") }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
 
@Component
export default class Hello extends Vue {
}
</script>

出力結果

npm run server
で実行させて、以下のURLにアクセスする

http://localhost:8080/Hello

ja の場合 

こんにちは

世界

en の場合 

Hello

World

参考文献

https://www.shookuro.com/entry/2019/08/30/181143
https://qiita.com/mi_upto/items/6d76dcd2d2c09b1bcb88

関連記事

Vue.js ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vuetify ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/26/000242