요즘은 앱이나 소프트웨어를 여러 국가에 출시하는 것이 일반적이다. 특히 프론트엔드는 글로벌라이징(국제화) 작업할 일이 빈번하다. i18n은 이런 국제화를 손쉽게 할 수 있도록 도와주는 라이브러리다. vue에선 vue-i18n라는 라이브러리로 공식 지원한다.

<aside> 💡 21년 8월 기준 현재 v9 버전이 Latest이므로 v9 버전 기준으로 작성

</aside>

시작하기

기본 사용법

설치 명령어에서 v9 버전은 @next 접미사가 붙는다.

npm install vue-i18n@next

src/plugins/i18n.js 파일을 만든 후 locale 언어를 정의하고 i18n 인스턴스에 추가한다. locale messages의 key 이름은 ISO 639 Language Code(ko, en 등)로 설정하는걸 추천. 영국 영어와 미국 영어처럼 같은 언어라도 지역마다 사용법이 다르기 때문에 en(영어) en-US(영어-미국) en-GB(영어-영국) 처럼 언어-지역 형태로 코드가 나눠져있다. Lingoes에서 각 언어/지역 코드를 한눈에 확인할 수 있다.

import { createI18n } from 'vue-i18n';

// 지역(언어)별 메시지 설정
const messages = {
  en: { hello: 'hello world' },
  ko: { hello: '헬로우 월드' }
}

export default createI18n({
  locale: 'ko', // set locale
  fallbackLocale: 'ko', // set fallback locale
  messages, // set locale messages
  // ...옵션
})

생성한 i18n 인스턴스를 Vue 인스턴스에 주입시킨다. 그럼 template 안에서 $t() 함수를 이용해 전역으로 사용할 수 있다.

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './plugins/i18n';

createApp(App).use(i18n).mount('#app');

아래처럼 $t('localeMessagesKey') 형식으로 사용한다.

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

// locale 언어가 영어(en)라면 'hello world' 출력
// locale 언어가 한국어(ko)라면 '헬로우 월드' 출력

브라우저 기본 언어 / fallbackLocale

크롬 언어 설정에서 사용자가 원하는 언어를 선호하는 순서대로 추가할 수 있다. 일반적으로 가장 위에 있는 언어를 모국어로 판단하여 기본 언어로 설정되며, 번역 서비스의 목적(destination) 언어가 되기도 한다.

크롬 콘솔창에 navigator.languages를 입력해보면 크롬 언어 설정에서 추가한 언어 목록을 배열 형태로 확인할 수 있다. 배열 가장 첫번째(0번 인덱스) 언어가 사용자가 가장 선호하는 언어로 보통 브라우저의 UI를 구성하는 언어가 된다. 가운데 "und"는 왜 들어갔는지 모르겠지만, Undetermined 약자로 정의되지 않았다는 뜻.