[Vue.js] Vue-i18n을 활용한 다국어 패치

 

이번에 국문/영문에 동시에 오픈해야 하는 시스템이 있었는데,

기능이 완전히 동일해서 view 파일을 각각 만들어서 사용하는 건 좀 비효율적이었다. 유지보수하기도 귀찮을거고..

그래서 같은 view 파일로 사용하기 위해서 Vue-i18n이라는 라이브러리를 활용했다.

 

Vue-i18n

i18n은 Internationalization (국제화)의 약자다. i와 n 사이에 18글자가 들어가서 i18n이라고 줄여 쓴다고 한다.

(발음은 보통 아이일팔엔 또는 아이eighteen엔이라고 한다는데, 아이십팔엔이라고 부르는 분들도 계시더라)

 

https://vue-i18n.intlify.dev/guide/installation.html

Installation | Vue I18n

나는 기존 프로젝트의 일부에 Vue.js를 적용해서 사용하는거라서 Module import 방식으로 설치했다.

 

# 세팅하기

<script type="importmap">
    {
        "imports": {
            "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
            "vue-i18n": "https://unpkg.com/vue-i18n@9/dist/vue-i18n.esm-browser.js"
        }
    }
</script>

<script type="module">
    import {
        createApp,
        ref,
        watch,
        computed,
        onMounted,
        onUnmounted
    } from 'vue'

    import {
        createI18n
    } from 'vue-i18n'

    const vue = {
        setup() {
            ...
        }
    };

    const i18n = createI18n({
        locale: 'kor' // 기본 언어
        fallbackLocale: 'eng', // 기본 언어로 등록된 메세지가 없다면 대체 언어
        messages: {
            // 언어명
            kor: {
                message: {
                    hello: '안녕'
                }
            },
            eng: {
                message: {
                    hello: 'hello' 
                }
            }
        }
    });

    const app = createApp(vue);
    app.use(i18n); 
    app.mount('#app');
</script>

나는 텍스트가 많지 않아서 위와 같이 세팅했는데, 텍스트가 많다면 json 파일로 따로 관리해주는 게 더 깔끔할 것이다.

 

# 번역된 메시지 표시하기

<p>
    {{ $t('message.hello') }}
</p>

$t() 함수 내에 key값을 넣어주면 된다.

 

# i18n의 언어를 동적으로 전환하기

// CreateI18n을 할당했던 변수명 i18n
i18n.global.locale = 'eng';

만약 vue 내 변수로 동적으로 전환하고 싶다면 watch를 활용하는 방법이 있다.

const vue = {
    setup() {
        const language = ref('kor');
        ...
        watch(language, (newLanguage) => {
            i18n.global.locale = newLanguage; // language가 바뀔 때마다 i18n의 locale을 변경한다.
        });
        ...
    }
}