Vue.js 로 구성된 프로젝트를 진행하며 다국어 처리에 관심을 갖게 되었습니다.
우리 프로젝트에서는 이미 사용되고 있었지만, i18n이 도대체 무엇인지, 어떻게 사용되는지 공부하기 위해 해당 포스트를 작성합니다.

---

i18n

i18n은 internationalization(국제화)라는 단어에서 i와 n사이에 18개의 단어가 있다는 뜻입니다.
즉, 다양한 지역에 맞게 현지화(localization, l10n)하는 시스템입니다.

---

설치

vue.js에서 i18n을 사용하기 위해서는 vue-i18n 라이브러리를 설치해야 합니다.

npm을 이용한 설치는 다음과 같습니다.
npm install vue-i18n@8

vue cli 3.x버전 이상이면 다음과 같은 방법이 있습니다.
vue add i18n

(저는 vue-i18n이 적용되어 있는 프로젝트를 pull했기 때문에 상단의 과정이 필요하지 않았습니다.)

---

사용방법

사용방법은 다음과 같습니다.

html

<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>

javascript

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

Vue.use(VueI18n)

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

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'ja', // set locale
  messages, // set locale messages
})


// Create a Vue instance with `i18n` option
new Vue({ i18n }).$mount('#app')

결과

<div id="#app">
  <p>こんにちは、世界</p>
</div>

---

출처

https://kazupon.github.io/vue-i18n/started.html#javascript