Vue-i18n 사용기
2020/04/27
다국어를 지원하기 위한 i18을 vue에 적용시켜보려고 한다.
설치
npm install vue-i18n
매우 간단하게 설치를 할 수있다.
적용하기
main.js파일로 가서 먼저 import를 진행해준다.
import VueI18n from 'vue-i18n`
Vue.use(VueI18n)main.js파일에서 아래와 같이 작성하면 일단 적용은 끝!
const messages = {
en: {
message: {
hello: 'hello world'
}
},
ko: {
message: {
hello: '안녕'
}
}
}
const i18n = new VueI18n({
locale: 'ko',
messages
})
new Vue({
router,
store,
i18n,
render: h => h(App),
}).mount('#app');파일 분리하기
main.js에 번역해야하는 모든 부분을 작성하게 되면 코드가 지저분해지기 때문에, 번역할 파일을 분리해준다.
locales폴더를 생성하고 index.js 파일을 생성하고 그 안에 작성한다.
// locales/newBlog.js
export const messages = {
en: {
message: {
hello: 'hello world'
}
},
ko: {
message: {
hello: '안녕'
}
}
}// main.js
import { messages } from './locales';끝 그럼 화면에 출력을 해보도록 한다.
언어를 전환할 수 있도록 버튼을 두 개 만들고, 화면에 출력을 해보도록한다.
<template>
<div class="home">
<button @click="$i18n.locale='ko'">한글</button>
<button @click="$i18n.locale='en'">영어</button>
<p>메세지</p>
<p>{{$t('message.hello')}}</p>
</div>
</template>
날짜 & 통화
vue-i18n은 날짜와 통화표시까지 지원해주고 있다.
날짜는 dateTimeFormats를 이용한다.
// locales/newBlog.js 에 추가
export const dateTimeFormats = {
'en-US': {
short: {
year: 'numeric', month: 'short', day: 'numeric'
},
long: {
year: 'numeric', month: 'numeric', day: 'numeric',
weekday: 'short', hour: 'numeric', minute: 'numeric'
}
},
'ko-KR': {
short: {
year: 'numeric', month: 'short', day: 'numeric'
},
long: {
year: 'numeric', month: 'numeric', day: 'numeric',
weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true
}
}
}locale을 ko에서 ko-KR / en 에서 en-US로 바꿔준다
const i18n = new VueI18n({
locale: 'ko-KR',
messages,
dateTimeFormats,
})<!-- 버튼에 주었던 이벤트의 locale도 변경해준다 -->
<button @click="$i18n.locale='ko-KR'">한글</button>
<button @click="$i18n.locale='en-US'">영어</button>
날짜
<p>{{ $d(new Date(), 'short') }}</p>
<p>{{ $d(new Date(), 'long') }}</p>
통화 역시 같은 방식으로 적용시키면 되고, numberFormats를 이용한다.
// localse/newBlog.js
export const numberFormats = {
'en-US': {
currency: {
style: 'currency', currency: 'USD'
}
},
'ko-KR': {
currency: {
style: 'currency', currency: 'KRW', currencyDisplay: 'symbol'
}
}
}
// main.js
const i18n = new VueI18n({
locale: 'ko-KR',
messages,
dateTimeFormats,
numberFormats
})<!-- html 추가 -->
통화
<p>{{ $n(999, 'currency') }}</p>
<p>{{ $n(9999, 'currency') }}</p>
vue-i18n의 아주 간단한 사용법을 알아보았다. 더 많은 속성과 더 많은 기능을 제공해주고있다. vue-i18n 사이트를 참고하길 바란다.
