[Vuejs]-Nuxt 3 and @nuxtjs/i18n isn't posible to iterate over translations using v-for anymore?

by

-1👍

✅

You try to use this tool in the wrong way. I18n tool is only to get some translation string by key, not to store some kind of data like arrays.

You can arrange it this way:

en.js

section: {
   title: 'My title',
   highlighted: {
      // '1' - just key
      '1': {
         title: 'Highlighted title 1',
         text: 'Highlighted text 1'
      },
      '2': {
         title: 'Highlighted title 2',
         text: 'Highlighted text 2'
      }
   ]
}

component.vue

<template>
  <div> {{ $t('section.highlighted.1.title') }} </div>
</template>

Maybe it can be a good idea with translating if you have fixed k-elements to translate, that’s ok (for a landing page’s blocks – ended features list, etc).

But if you want to show big data here, you should take a look at a database and store your data there or in JSON files on the client side and get them manually by your locale (this.$i18n.locale).

👤Aleksandr Savkin

2👍

You totally can iterate on an array in your translation files, vue-i18n has specific methods to achieve that.

https://vue-i18n.intlify.dev/api/composition.html#composer

Since nuxt/i18n for nuxt 3 is using this version of vue i18n, you can use them directly like so:

<p
  v-for="paragraph in $tm('some.array')"
  :key="paragraph"
>
  {{ $rt(paragraph) }}
</p>
👤Thibaut Maurice

0👍

I found this:

Use $tm instead of $t

👤ChrisSta

Leave a comment