How to use i18n component interpolation in Nuxt 3?

Question

I have a project that uses Nuxt 3 with the following dependencies:

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

The problem is that I can't use the <i18n> tag like I did before with Nuxt 2 version.

For example:

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

How can I use this code with Nuxt 3?

Answer 1

This works differently now, since you need to use vue-i18n v9 with Nuxt 3.

The syntax is similar but slightly different:

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

Note the following changes:

• Replace <i18n> tag with <i18n-t>
• Replace path attribute with keypath

See the official docs https://vue-i18n.intlify.dev/guide/advanced/component.html for more details.