Nuxt3のi18nの中でタグを使う

はじめに

Nuxt3で

<div><a href="/registration">登録画面</a>に移動</div>

<div>Move to <a href="/registration">Registration</a></div>

みたいなリンクの多言語化をしようとしたときに

<div>
  <NuxtLink :to="/registration">
    {{ t('registration') }}
  </NuxtLink>
  {{ t('moveTo') }}
</div>

とすると英語と日本語で語順が違ったりして困っていました(調べてもNuxt2のやり方だったり、v-htmlを使ったり)。

いろいろ調べた結果、解決方法が分かったので残しておきます。

結論

i18n-t を使う。

.vueファイル

<i18n-t  tag="div" keypath="moveTo">
  <template #registrationLink>
    <NuxtLink to="/registration">
      {{ t('registration') }}
    </NuxtLink>
  </template>
</i18n-t>

言語ファイル(ja)

{
  "moveTo": "{registrationLink}に移動",
  "registration": "登録画面"
}

言語ファイル(en)

{
  "moveTo": "Move to {registrationLink}",
  "registration": "registration"
}