如何在 Nuxt 3 中使用 i18n 组件插值？

Question

我有一个使用 Nuxt 3 的项目，具有以下依赖项：

"@nuxtjs/i18n": "8.0.0-beta.4",
"nuxt": "3.0.0",

问题是我无法<i18n>像之前在 Nuxt 2 版本中那样使用该标签。

例如：

<i18n
  tag="h1"
  path="homepage.welcome.title"
  class="title"
>
  <template v-slot:frameworkType>
  <span class="text-nuxt-lightgreen">
    Vue
      </span>
  </template>
</i18n>

我如何在 Nuxt 3 中使用此代码？

Answer 1

现在的工作方式有所不同，因为您需要将vue-i18nv9 与 Nuxt 3 一起使用。

语法相似但略有不同：

<i18n-t
  tag="h1"
  keypath="homepage.welcome.title"
  class="title"
>
  <template #frameworkType>
    <span class="text-nuxt-lightgreen">
      Vue
    </span>
  </template>
</i18n-t>

请注意以下更改：

• <i18n>将标签替换为<i18n-t>
• path将属性替换为keypath

有关更多详细信息，请参阅官方文档https://vue-i18n.intlify.dev/guide/advanced/component.html。