vue3 i18n 적용

https://imkh.dev/vue-i18n/
위의 링크를 따라 사용해보는데, Vue.use에서 에러 발생

원인 : Vue3 사용하고 있기 때문

해결 : 아래와 같이 진행하여 적용

1. i18n 설치

npm install vue-i18n@9

2. 원하는 위치에 언어팩 파일 생성
   ex) @/assets/i18n/ko.json
   

파일 내에 json 형식으로 작성
ex)

{
  "title": "HI"
}

3. main.js 파일에서 기존 내용 삭제 하지 말고 아래 항목들 추가

import { createI18n } from 'vue-i18n'
import i18n_ko from '@/assets/i18n/ko.json' // 이 부분은 2번에서 작성한 경로 넣기

...

const messages = {
  ko: i18n_ko,
}

const i18n = createI18n({
  locale: 'ko',
  messages
})

...

app.use(i18n)

4. 사용

{{ $t('title') }}

5. 다른 언어 추가하고 싶으면 2번에서 설정한 경로에 다른 언어 팩도 넣고 main.js에서 아래 항목들 추가