[Vue.js] i18n를 이용한 다국어 처리

i18n 라이브러리는 Vue.js의 공식 라이브러리 중 하나로, 다양한 언어와 지역을 지원하는 다국어 처리를 쉽게 구현할 수 있도록 도와줍니다.

 

1. Vue.js i18n 라이브러리 설치

npm install vue-i18n

2. Vue.js i18n 라이브러리 사용

• main.js 파일에 다음과 같이 i18n 라이브러리를 추가합니다.

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

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // 언어 설정
  fallbackLocale: 'en', // fallback 언어 설정
  messages: {
    en: { // 영어 메시지
      hello: 'Hello World!'
    },
    ko: { // 한국어 메시지
      hello: '안녕하세요!'
    }
  }
})

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

 

• 컴포넌트에서 $t 메소드를 사용하여 다국어 메시지를 불러올 수 있습니다.

<template>
  <div>
    <p>{{ $t('hello') }}</p>
  </div>
</template>

 

• $t 메소드를 사용하여 현재 언어에 맞는 메시지를 불러올 수 있습니다.

this.$i18n.locale = 'en' // 영어로 설정
this.$t('hello') // 'Hello World!'
this.$i18n.locale = 'ko' // 한국어로 설정
this.$t('hello') // '안녕하세요!'