N
Nuxt•6mo ago
starcannxn

i18n can't handle nested arrays / arrays of objects

I'm having a weird issue with i18n everything works with the locales I have, then I tried to use arrays inside locales, and I did this: const { t } = useI18n(); const items = ref(t("faq.questions", { returnObjects: true })); (I even tried with computed) but it's just returning a string instead. my locale file is correct, and logging items returns faq.questions the nuxt.config part for i18n has lazy: true,, apart from that, everything is standard
4 Replies
kapa.ai
kapa.ai•6mo ago
Hi @アク. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not contain explicit information about handling arrays in i18n locale files with Nuxt or Vue I18n, nor about the use of the { returnObjects: true } option in this context. The sources cover general i18n usage, configuration, and some advanced topics, but do not address this specific scenario. If you need to translate arrays or objects from your locale files, I recommend consulting the official Vue I18n documentation or the Nuxt i18n module documentation for guidance on this feature, as the provided sources do not cover it. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6mo ago
<@1253367287780606018> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
dwol
dwol•6mo ago
where are you getting returnObjects: true from? Is that in the docs anywhere?
starcannxn
starcannxnOP•6mo ago
Apparently, as of v9, "the translation API like $t and t function (and, composition API too) that return string only. Object and array values are no longer returned." Okay, so the workaround using tm and rt is something like this: instead of: 
const { t } = useI18n();
const items = ref(t("faq.questions", { returnObjects: true }));
const { t } = useI18n();
const items = ref(t("faq.questions", { returnObjects: true }));
I did: 
const { tm, rt } = useI18n();

const items = ref(tm("faq.questions"));
const { tm, rt } = useI18n();

const items = ref(tm("faq.questions"));
and inside the component, instead of: 
<Card
  v-for="(item, index) in items"
  :key="index"
  :label="item.label"
  :content="item.content"
/>
<Card
  v-for="(item, index) in items"
  :key="index"
  :label="item.label"
  :content="item.content"
/>
I did this (added rt()): 
<Card
  v-for="(item, index) in items"
  :key="index"
  :label="rt(item.label)"
  :content="rt(item.content)"
/>
<Card
  v-for="(item, index) in items"
  :key="index"
  :label="rt(item.label)"
  :content="rt(item.content)"
/>
All the locale files must be present though (apparently, it threw an error when I switched language, and it was gone when I provided the missing locale file) tag: nested array/arrays or array of objects

Did you find this page helpful?