[next] i18n custom block

[mrleblanc101]

Is this not yet supported in the Nuxt 3 version ? I can't seem to find any information about this. I doesn't seem to work.

<i18n lang="json">
{
  "fr": {
    "footer": "Pied de page"
  },
  "en": {
    "footer": "Footer"
  }
}
</i18n>

[timgoeller]

Hey, I hade the same issue. What worked for me was to also import i18n like this:

<script setup>
import { useI18n } from '#i18n';
const i18n = useI18n();
</script>

[PikachuEXE]

To add more to @timgoeller answer

When using translation, i18n.t must be used, $t won't work

<template>
<p>{{ i18n.t("footer") }}</p>
</template>

<script setup>
import { useI18n } from '#i18n'
const i18n = useI18n()
</script>

<i18n lang="json">
{
  "zh": {
    "footer": "頁腳"
  },
  "en": {
    "footer": "Footer"
  }
}
</i18n>

Edit 1: yaml also works

<i18n lang="yaml">

en:
  footer: Footer
zh:
  footer: 頁腳

</i18n>

[kazupon]

current v8 alpha version, i18n custom block has not been implemented yet. We will implement it after v8 alpha.1 is released.

Thanks!

[kazupon]

In v8.0.0-beta.1 or later, this option is deprecated. Per component translations is enabled on default. Thanks! https://v8.i18n.nuxtjs.org/guide/migrating#deprecated-vuei18nloader-option