[Vue3 vite] Vue3で多言語対応

8543 ワード
I18n Vue.js vite TypeScript I18n テキストリンク

Vue3で多言語対応(vite)

目次

vue-i18nインストール
フォルダー構成
翻訳用ファイルの準備
多言語配置
Vue3の開始処理
使い方と言語切り替え

今回はVue3に、多言語対応の実装方法について説明します。
下記の通りに実装すれば、上手く行けると思います。
viteは本当に早いものだなぁ～

vue-i18nインストール

先ずはnpmを利用して、国際化のプラグインをインストール

npm install vue-i18n@next

フォルダー構成

└─src
    └─language
        ├─en.ts
        ├─index.ts
        └─ja.ts

翻訳用ファイルの準備

英語と日本語

en.ts
export default {
    test: {
        hello: 'hello'
    }
}
ja.ts
export default {
    test: {
        hello: 'こんにちは'
    }
}

多言語配置

index.ts
// i18nのコンポーネントを導入する
import { createI18n } from 'vue-i18n'
// 翻訳用のファイルを導入する
import ja from './ja'
import en from './en'

const i18n = createI18n({
    // デフォルトは日本語
    locale: 'ja',
    messages:{
        en,
        ja
    }
})
export default i18n

Vue3の開始処理

vueのインスタンスに、プラグインを使用する

main.ts
// index.tsを導入する
import i18n from './language'

const app = createApp(App)
// i18nを使う
app.use(i18n)
app.mount("#app")

使い方と言語切り替え

$t()メソッドを使って翻訳を適用します。
またtypescriptに値が貰えます。

上記index.tsのi18nを利用して、簡単に言語を切り替えます。

template.vue
<template>
    <h1>{{$t('test.hello')}}</h1>
    <!-- Element-plusのボタン -->
    <el-button @click="testI18n()">helloを表示</el-button>
    <!-- 言語切り替えボタン -->
    <el-button @click="changeLang('ja')">Japanese</el-button>
    <el-button @click="changeLang('en')">English</el-button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: "test",
  methods: {
    testI18n() {
      console.log(this.$t('test.hello'))
    },
    // 言語を切り替える
    changeLang(langType: "ja" | "en") {
      i18n.global.locale = langType;
    },
  },
})
</script>