vue3をvue-i18nを使って多言語化対応してみる

vue3に移行している際に多言語化対応について調べたのでメモ

参考(https://vue-i18n-next.intlify.dev)

#環境
Vue3(cliで環境作成)
Typescript

#多言語化プラグイン　vue-i18nを使う

インストール

# npm install vue-i18n@next

main.ts

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const messages = {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    }
  }


const i18n = createI18n({
    locale: 'ja', // set locale
    messages, // set locale messages)
})

const app = createApp({
  // something vue options here ...
})

app.use(i18n)
app.mount('#app')

App.vue

<template>
  <div>
    {{$t("message.hello")}}
  </div>
</template>

多言語化しなくても、メッセージを切り分けることで後々メンテナンスが楽になると思います。