在 NuxtJS 中使用 i18n-n 功能组件答案

【问题标题】：Usage i18n-n functional component in NuxtJS在 NuxtJS 中使用 i18n-n 功能组件
【发布时间】：2021-09-28 20:46:04
【问题描述】：

如何在 Nuxt 中使用i18n-n functional component？ Vue i18n Guide 说我可以这样使用它：

<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
  <span v-slot:currency="slotProps" styles="color: green">{{ slotProps.currency }}</span>
  <span v-slot:integer="slotProps" styles="font-weight: bold">{{ slotProps.integer }}</span>
  <span v-slot:group="slotProps" styles="font-weight: bold">{{ slotProps.group }}</span>
  <span v-slot:fraction="slotProps" styles="font-size: small">{{ slotProps.fraction }}</span>
</i18n-n>

但是带有i18n module 的Nuxt 对<i18n-n></i18n-n> 组件一无所知并抛出错误

【问题讨论】：

这个从v8.10+ 的vue-i18n 开始可用。你能去你的yarn.lock 并在那里检查这个包的版本吗？你的nuxt-i18n 可能不够高。更新这个，可能会碰到vue-i18n 并允许这个新功能。另外，错误是什么？
@kissu 我使用最新版本的Nuxt i18n - 6.27.3。我不知道这个模块基于哪个版本的 Vue i18n。错误是v-slot can only be used on components or <template>
这里有一个未解决的问题：github.com/kazupon/vue-i18n/issues/1127#issue-815262350 您可以在那里进行设置，从而解决问题。
@kissu 我在那里问过，有人提出了这个聪明的主意：<i18n-n :value="100" format="currency"><template #integer="slotProps"><span>{{ slotProps.integer }}</span></template></i18n-n>。这种方法不会引发错误，但只会呈现空包装标签<div></div>。你有什么想法可以让它发挥作用吗？
这家伙实际上是 Nuxt.js 的大使，负责 i18n 的 nuxt 模块。 :)

标签： nuxt.js vue-i18n nuxt-i18n

【解决方案1】：

已解决！

正确的代码：

<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
  <template v-slot:currency="slotProps">
    <span styles="color: green">{{ slotProps.currency }}</span>
  </template>
  <template v-slot:integer="slotProps">
    <span styles="font-weight: bold">{{ slotProps.integer }}</span>
  </template>
  <template v-slot:group="slotProps">
    <span styles="font-weight: bold">{{ slotProps.group }}</span>
  </template>
  <template v-slot:fraction="slotProps">
    <span styles="font-size: small">{{ slotProps.fraction }}</span>
  </template>
</i18n-n>

还需要设置numberFormatcorrectly

谢谢：

@kissu 用于查找 actual issue

@rchl 为working approach

@ashkanz 为correctly set up numberFormats

【讨论】：

【解决方案2】：

这个 Github 问题解决了 OP 的问题：https://github.com/kazupon/vue-i18n/issues/1127

本质上是一些糟糕的文档和一些配置。

【讨论】：