[TIL] Vue.js/locale(vue-i18n) 세팅

vue-i18n 플러그인은 언어세팅을 위한 라이브러리로 서비스 내 다국어 기능이 필요하거나, 서버 데이터를 사용자 환경에 맞게 번역이 필요할 때 활용된다.

1. 라이브러리 설치

npm install vue-i18n@8 or yarn add vue-i18n@8

//Vue Cli 3.x 이상 버전
vue add i18n

• 개발 환경에 따라 터미널 창에 플러그인 설치를 진행한다.
  
  
  

2. 관련 폴더&파일 생성

• scr 하위 경로에 locales폴더를 생성하고 index.js 파일을 만들어준다.
• 자동으로 생성되는 플러그인을 사용할 수도 있다. (vue add i18n)

// locales/index.js

const messages = {
  ko: {
    field: {
      receiving: '입고',
      shipping: '출고',
      stock: '재고',
      mdm: '기준정보',
    },
  },
}

export default messages

• 다국어 설정이 필요한 데이터 파일은 locales 폴더에 세팅되어야 하며, JSON 형태로 매핑해준다.
• 상수명(messages)은 자유롭게 네이밍하고, 전역설정 시 명시해준다.
  
  
  

3. 전역 설정

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'
import messages from './locales'

const i18 = new createI18n({
  legacy: false, // set 'false' to use Composition API
  locale: 'ko',
  messages,
})

const app = createApp(App)

app.use(i18)
app.provide(i18, '$t')
app.mount('#app')

• vue-i18n 라이브러리가 잘 설치되었다면 { createI18 } 활용하여 인스턴스를 생성하고,
  옵션값으로 서비스 환경을 제어한다.
  -> 옵션으로는 Schema, Locales, Legacy 가 존재하며 파라미터로 명시하면 된다.

  Schema : messages, datetimeFormats, numberFormats 등 i18n의 리소스
  Locales : 다국어 데이터의 기본 언어
  Legacy : 레거시 모드의 on/off (i18n이 제공하는 내장 API 사용 유무)     

• i18인스턴스를 app 인스턴스의 인자로 전달하고, provide를 통해 모든 컴포넌트에서 '$t' 지시어로 불러와 사용 가능하도록 global 설정을 해준다.

4. 다국어 매핑

<template>
  <div class="flex flex-col justify-between w-150 bg-gray-800 h-full">
    <div class="lnb-wrap">
      <ul v-for="(title, index) in state.lnb" :key="index">
        <li class="p-10">
          <div class="text-xl text-gray-100" @click="clickTitle(title)">
            {{ $t(`field.${title[0]}`) }}
          </div>
          <div v-for="{ label, route } in title[1].child" :key="route">
            <div
              v-if="title[1].isActive"
              class="text-gray-100"
              @click="goPage(route, label)"
            >
              {{ $t(`field.${label}`) }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div>
      <p>{{ state.id }}</p>
      <button @click="logout">로그아웃</button>
    </div>
  </div>
</template>

• main.js의 provide(i18, '$t') 코드로 인해 i18 인스턴스는 '$t' 지시어로 사용이 가능하다.
• 2번에서 locales/index.js 내의 데이터는 field : {}의 구조를 가지고 있기 때문에 다국어 변환 호출 시, $t의 파라미터는 백틱(``)으로 key값을 명시했다. 이때, 데이터가 동적으로 매핑될 수 있도록 ${} 로 감싸주었다.
  
  
  
  

참조

• Vue I18n
• Vue공식문서