[ Vue ] vue-i18n 다국어 기능

react에서도 i18n을 사용했지만

vue에서는 이전에 i18n을 사용안하고 직접 언어 변경을 구현한 적이 있었는데, 이번에는 i18n을 사용해서 한번 다시 해보았다.

---

Installment

vue에서는 vue에서 사용하는 vue-i18n 라이브러리를 설치한다.

npm install vue-i18n

---

Useage

i18n.ts 초기 생성 파일 만들기

message는 kev:value형태로 다루기 때문에 좀 더 관리를 편하게하기 위해서 각각 사용되는 곳으로 한번 더 묶어서 정리했다.

 

사이드바에 휴지통과 설정 버튼이 있기때문에 side안에 휴지통, 설정 두개를 묶어주었다.

이후 createI18n으로 i18n을 만들어 주면 된다.

import { createI18n } from 'vue-i18n'

const messages = {
    en: {
        message: {
            side: {
                trash: 'Trash',
                setting: 'Setting',
            }
        },
    },
    ko: {
        message: {
            side: {
                trash: '휴지통',
                setting: '설정',
            }
        },
    },
}

const i18n = createI18n({
    legacy: false, // Composition API 사용 시 false
    locale: 'ko', // 기본 언어
    fallbackLocale: 'ko',
    messages,
})

export default i18n

 

이후 만든 i18n을 main.ts에서 app.use로 i18n을 등록

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

 

이러면 i18n 사용 준비는 끝난다.

---

Component

그럼 이제 각 컴포넌트에서의 사용은 vue-i18n을 가져와

t 를 사용해 해당 값을 가져오면 된다. t안에는 key:value로 저장한 message들의 값을 가져온다.

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const {t} = useI18n()
</script>
<template>
	{{ t('message.side.trash') }}
	{{ t('message.side.setting') }}
<template>

 

usei18n에서 locale을 가져와서 사용하면 locale에는 현재 선택되어있는 언어가 무엇인지 나오며,

이 locale값을 바꾸면 해당 언어로 바뀌게 된다.

 

따라서 누른 아이템에 따라서 local.value의 값을 ko 혹은 en으로 바꾸어서 영어와 한국어 둘다 언어 변경을 할 수 있도록 한다.

그리고 locale에 따라서 해당 locale에는 class를 주어 현재 활성화된 언어가 무엇인지 표시를 한다.

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const onClickChangeLocal = (lang: 'en' | 'ko') => {
  locale.value = lang
}
</script>
<template>
	<div class="item"
           :class="{'select': locale == 'en'}"
           @click="onClickChangeLocal('en')"
      >
        English
      </div>
      <div class="item"
           :class="{'select': locale == 'ko'}"
           @click="onClickChangeLocal('ko')"
      >
        한국어
      </div>
<template>

 

그럼 이제 언어 변경에서 클릭시 locale이 바뀔때마다 휴지통,설정이 한국어와 영어로 바뀌고,

현재 언어 설정이 무엇인지 나오게 된다.