[Vue3] CompositionAPI vue i18n 다국어 처리

1. i18n 설치

npm install vue-i18n@9

2. Create json file 

src 밑으로 lang이라는 폴더 만들어서 사용했음

1. ko.json

{
  "mainHeader": {
    "loginBtn": "로그인",
    "joinBtn": "무료 회원가입"
  },
  "login" : {
    "title": "로그인",
    "loginBtn": "로그인",
    "joinBtn": "회원가입",
    "placeholderId": "이메일",
    "placeholderPwd": "비밀번호",
    "invalidIdFeedback": "이메일을 정확히 입력해주세요.",
    "invalidPwdFeedback": "패스워드 8~20자리, 대문자/소문자/특수문자를 포함하여야합니다."
  }
}

2. en.json

{
  "mainHeader": {
    "loginBtn": "Sign in",
    "joinBtn": "Free sign up"
  },
  "login" : {
    "title": "Sign in",
    "loginBtn": "Sign in",
    "joinBtn": "Sign up",
    "placeholderId": "email",
    "placeholderPwd": "password",
    "invalidIdFeedback": "Please enter your email correctly.",
    "invalidPwdFeedback": "Password must contain 8 to 20 digits, uppercase/lowercase/special characters."
  }
}

3. index.js

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

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

3. main.js 설정

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

// 나의 경우에는 다국어 셀렉트 박스 선택할때 로컬스토리지에 넣어놓고 가져다 쓰려고 이렇게 설정
const vi18nLocale = localStorage.getItem('lang') || 'KO'
// i18n create
const i18n = createI18n({
  legacy: false,
  locale: vi18nLocale,// 초기 언어 설정
  fallbackLocale: 'EN', // 현재 lcale을 사용할 수 없을 때 fallback으로 사용 될 Lcale 지정
  messages: messages // 다른 로케일에 대한 실제 번역 메세지
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

4. 사용법(TestI18n.vue)

<script setup>
import {useI18n} from 'vue-i18n'
const {t} = useI18n()
</script>
<template>
  <div>
    <button type="button">
      {{t("mainHeader.loginBtn")}}
    </button>
  </div>
</template>

 

 

 

※ 공식문서 참고: https://vue-i18n.intlify.dev/

Vue I18n | Vue I18n