[vue-i18n] 1. 시작하기

다음 글: 2024.12.07 - [FE] - [vue-i18n] 2. 번역 리소스

---

vue.js v3.4.25, vue-i18n v9.13.1 기준 작성

1. 설치

사용하는 패키지 매니저에 따라 설치를 진행한다.

# npm
npm install vue-i18n@9

# yarn
yarn add vue-i18n@9

 

2. 플러그인 등록

vue에서 사용하기 위해 app에 명시적으로 설치해줘야 한다. main.js에 다음과 같이 작성한다.

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

const app = createApp(App)

const i18n = createI18n({
  locale: 'ko',                 // 적용할 언어
  fallbackLocale: 'en',         // messages에서 발견 못할시 대체될 언어
  legacy: false,                // vue3에서 사용하기 위해 설정
  messages: {                   // 번역 리소스
    en: {
      message: 'hello world'
    },
    ko: {
      message: '안녕, 세계'
    },
    ja: {
      message: 'こんにちは、世界'
    }
  }
})
app.use(i18n)

app.mount('#app')

 

3. 드롭다운 컴포넌트 작성

실제로 사용해 보기 위해 설정 언어를 변경할 수 있는 컴포넌트를 작성한다.

// src/components/SelectLocale.vue
<template>
  <select v-model="locale">
    <option v-for="item in availableLocales" :key="item" :value="item">
      {{ locales[item] }}
    </option>
  </select>
</template>
<script setup>
import { watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'

const { locale, availableLocales } = useI18n()

const locales = {
  en: 'English',
  ko: '한국어',
  ja: '日本語',
}

watchEffect(() => {
  localStorage.setItem('locale', locale.value)
})
</script>

 

useI18n을 사용하여 현재 사용하고 있는 언어 설정(locale)과, 사용 가능한 언어 목록(availableLocales)을 가져온다. 선택되는 locale 설정은 로컬 스토리지에 저장해 준다.

 

다음과 같이 컴포넌트가 만들어지고, 플러그인 등록 시 messages에 넣어 놓은 언어들이 들어가 있는 것을 확인할 수 있다. 클릭하면 값이 잘 바뀐다.

 

4. 예제 컴포넌트 작성

위에서 작성한 컴포넌트를 사용하여 실제 번역을 적용할 수 있는 컴포넌트를 작성한다.

// src/components/HelloWorld.vue
<template>
  <div>
    <SelectLocale />
    <div>언어 : {{ locale }}</div>
    <div>메시지 : {{ t('message') }}</div>
  </div>
</template>
<script setup>
import SelectLocale from './SelectLocale.vue'
import { useI18n } from 'vue-i18n'

const { locale, t } = useI18n()
</script>

앞서 작성한 컴포넌트와 마찬가지로 useI18n를 사용한다. t를 사용해서 번역 리소스를 가져오는데, 기본적으로 t(['리소스 키']) 구조를 갖는다.

 

다음과 같이 번역된 결과를 확인할 수 있고, 드롭다운을 클릭하여 언어를 변경하면 메시지도 잘 바뀐다.

 

기본 설정 끝 !

---

참고: 

[1] Vue I18n