translation in single file component <i18n></i18n> doesn't work

[salomonsanz]

Translation in single file components doesn't work for me.

<template>
    <div>
      {{ $t('hello', {name:'Peter'}) }}</div>
    </div>
</template>

<i18n>
{
  "en": {
    "hello": "Hola {name}"
  },

  "es": {
    "hello": "Hello {name} "
  }
}
</i18n>

Also I have tried with:
<i18n src="~/locales/common.json"></i18n>

But it didn't work for me either...

Has anyone been able to get it to work?

My environment:
Node 18.7.0
"@intlify/nuxt3": "^0.2.3"
"nuxt": "3.0.0-rc.6"

[Denis Inozemtsev]

Have you tried it using local variables?

<template>
    <div>
      {{ t('hello', {name:'Peter'}) }}</div>
    </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
</script>

<i18n>
{
  "en": {
    "hello": "Hola {name}"
  },

  "es": {
    "hello": "Hello {name} "
  }
}
</i18n>

[Honza Pobořil]

I has the same problem, using const { t } = useI18n() works.

But how to use local messages without that two lines of code?