[VUE 3] composition api에 vue i18n을 적용해보자

 

 

https://vue-i18n.intlify.dev/

Vue I18n | Vue I18n

장난 삼아 앱을 만들고 있다

왠지 언어 셋을 넣어서 개발하면 더 이뻐질 듯해서.. 혹시 누가 라이브러리 만들어놨나? 했는데 역시 만들어놨다 

 

당장 I18n을 써보자 

 

일단 홈페이지에 있는대로 

npm install vue-i18n@9

로 vue에다 설치해준다

 

그리고 번역물 json이 들어갈 폴더를 하나 만들어준다 

 

(저는 뷰 폴더의 src아래에다가 lang이라 만들었습니다..)

vuefolder - src - lang 

ㄴindex.js

ㄴen.json

ㄴko.json

ㄴjp.json

 

이렇게 파일을 만들고 index.js를 열어서 아래와 같이 만들어준다

import ko from '@/lang/ko.json'
import en from '@/lang/en.json'
import jp from '@/lang/jp.json'

export default {
    'KO' : ko,
    'EN' : en,
    'JP' : jp
}

이렇게 하고 번역 파일은 아래와 같이 만들어주자

//ko.json
{
    "header":{
        "initBtn1":"로그인 없이 시작",
        "initBtn2":"로그인으로 시작"
    }
}
//jp.json
{
    "header":{
        "initBtn1":"ログイン無しでスタート",
        "initBtn2":"ログイン後スタート"
    }
}
//en.json
{
    "header":{
        "initBtn1":"Start without login",
        "initBtn2":"Start with login"
    }
}

이렇게 파일을 3개 만들어주고.. 이제 main.js로 가서 아래와 vue-I18n과 만들어둔 언어 js파일을 붙여준다

 

 

 

 

import { createApp } from "vue";
import App from "./App.vue";

(...)

import { createI18n } from 'vue-i18n' 
import messages from './lang/index'  

const i18n = createI18n({
    legacy: false,
    locale: 'KO',
    fallbackLocale: 'EN',
    messages : messages    
})

createApp(App).use(store).use(router).use(i18n).mount("#app");

그리고 이번에 만들 장난감에서.. 언어 바꾸는 것이 헤더에 있으니 헤더로 가서 아래와 같이 만들어줬다

 

 

 

 

 

<template>
    <div class="d-flex gap-1 align-items-center">
        <div class="langs">
            <div class="btn-group">
                <button type="button" 
                class="dropdown-toggle bi bi-translate m-0 bg-transparent border-0" 
                data-bs-toggle="dropdown" 
                aria-expanded="false">
            </button>
                <ul class="dropdown-menu bsdbwidth 
                		   dropdown-menu-end p-0 m-0 bg-transparent 
                           border-0 animate slideIn">
					<li v-for="lang in availableLocales" :key="lang">
                    	<a class="dropdown-item text-end" href="#" @click="changing(lang)">
                        	{{lang}}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    <div>
</template>
<script setup>
    import { useI18n } from 'vue-i18n';

    const {availableLocales, locale}  = useI18n()  
    const changing = (la)=>{
        locale.value=la
    }
</script>

(참고로 부트스트랩을 쓰고 있어서 코드가 저렇다 좀 살벌하긴 한데.. 여하튼.. 중요한 건 li태그의 v-for부분 + @click부분이다

 

드롭다운이 열리고 요소를 클릭하면 만들어둔 vue-I18n에 접근해서 언어를 바꾸는 형식이다

 

그러면 자동으로 언어 셋을 휙휙 바꿔준다 

 

마지막으로 언어셋을 출력할 때는 이렇게 쓴다 

<template>
    <div class="h-100 p-2">
        <span>{{t("header.initBtn1")}}</span>
    </div>
</template>
<script setup>
    import { useI18n } from 'vue-i18n';
    const {t} = useI18n()
</script>

 

t로 가져와서 t('아까 json파일에 적은 내용')라는 식으로 생각하면 된다

 

매우 쉬우니 바로 적용해보자!