Today I Learned

vue-i18n의 $t 문법을 사용하다가 위치에 따라 사용방법이 달라져서 정리해보았다.

---

선 정리

상황	방식	예시
태그 안 텍스트	텍스트 보간법	<span>{{ $t('키') }}</span>
속성 값 (label, title 등)	동적 바인딩	<v-btn :title="$t('키')">
HTML 포함 번역값	v-html	<div v-html="$t('키')">
변수와 결합	computed	computed: { text() { return this.$t('키') + 변수; } }
메서드 내 사용	this.$t	alert(this.$t('키'))
복잡한 포맷팅	computed 또는 JS/TS	:label="$t('키') + format(변수)"

---

$t 문법 사용 방법

1. 텍스트 보간법 {{ $t('키') }}

   Vue 템플릿에서 태그의 콘텐츠에 번역된 텍스트를 직접 렌더링 할 때

<span>{{ $t('common.안녕') }}</span>

• 태그 안의 텍스트 콘텐츠에 번역값을 바로 표시할 때
• HTML은 렌더링 되지 않음. HTML 포함 시 v-html 필요
• 변수와 결합하려면 {{ $t('키') + ' ' + 변수 }}처럼 해야 함.

---

2. 동적 바인딩 :속성="$t('키')"

   태그의 속성(label, title, placeholder 등)에 번역값을 바인딩할 때

<v-text-field
	ref="a"
    v-model="formData.name"
    required
    :rules="nameRules"
    :label="`${$t('label.abc')}`"
    placeholder="Please Enter"
    maxlength="90"
    ></v-text-field>

---

• 여기서 $t를 쓸 때, 태그의 앞에는 :가 반드시 있어야 동적으로 바인딩 된다.(없으면 정적 바인딩)
• 속성 값이 문자열이어야 하므로, $t 외에 추가 연산은 : 안에서 처리`:label="$t('키') + ' 추가'"`

---

3. v-html로 HTML 포함 텍스트 <태그 v-html="$t('키')">

   번역값에 html 태그가 포함된 경우

<div v-html="$t('common.환영')"></div>

• 번역값에 스타일링(<b>, <span>)이 포함된 경우

---

4. JS/TS 코드에서 사용 this.$t('키')

   <script> 내에서 $t를 호출해 로직 처리

import { defineComponent } from 'vue';
export default defineComponent({
  methods: {
    showAlert(): void {
      alert(this.$t('common.경고'));
    }
  }
});

5. nuxt의 asyncData 안에서 사용 ${app.i18n.t('cancel')}<

export default {
  asyncData({ app }) {
    return {
      options: {
        // ...
        previewTemplate: `<div>
                            <u data-dz-name></u> (<u data-dz-size></u>)
                          </div>
                          <a class="dz-remove" data-dz-remove>${app.i18n.t('cancel')}</a>`
      }
    }
  }
}