vue-i18n 설정과 메시지 파일

i18n이란 무엇인가요?

Vue I18n 설치하기

// terminal
// npm install vue-i18n

메시지 파일

const en = {
  greeting: "Hello",
  nav: {
    home: "Home",
    about: "About",
  },
}

터키어 로캘 추가하기

const tr = {
  greeting: "Merhaba",
  nav: {
    home: "Ana Sayfa",
    about: "Hakkinda",
  },
}

i18n 인스턴스 만들기

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en, tr },
})

legacy: false를 사용하는 이유

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  messages: { en, tr },
})

앱에 등록하기

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

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

템플릿에서 $t 사용하기

<template>
  <h1>{{ $t("greeting") }}</h1>
  <a>{{ $t("nav.home") }}</a>
</template>

fallbackLocale의 작동 방식

// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English text

자리 표시자를 사용한 보간

const en = {
  welcome: "Welcome, {name}!",
}

// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"

메시지 파일 구성하기

// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"

createI18n({ locale: "en", messages: { en, tr } })

빠른 확인

복습