Vue I18n

Vue I18n
i18n의 사전적 정의: 국제화
i와 n사이 18개의 알파벳이 있다는 의미이다.
Vue 2, 3 버전 지원한다.

설치

# npm
npm install vue-i18n@11

# yarn
yarn add vue-i18n@11

# pnpm
pnpm add vue-i18n@11

설정: main.js 또는 main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

// 언어별 메시지 정의
const messages = {
  en: {
    message: {
      hello: 'Hello, world!'
    }
  },
  ko: {
    message: {
      hello: '안녕하세요, 세상!'
    }
  }
}

const i18n = createI18n({
  locale: 'ko', // 기본 언어 설정
  fallbackLocale: 'en', // 기본 언어가 없을 때 대체 언어
  messages,
})

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

컴포넌트에서 사용하기

컴포넌트에서는 <script setup> 구문에서 useI18n 훅을 사용하거나, this.$t를 이용해 번역 메시지를 가져올 수 있다.
컴포지션 API (<script setup>)

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

console.log(t('message.hello')) // '안녕하세요, 세상!'
</script>

<template>
  <h1>{{ t('message.hello') }}</h1>
</template>