Imagine having an Array stored in our translations file
en.js
section: {
title: 'This value is a string and it works perfectly',
highlighted: [
{
title: 'Highlighted title 1',
text: 'Highlighted text 1'
},
{
title: 'Highlighted title 2',
text: 'Highlighted text 2'
}
]
}
In Nuxt version 2 with nuxt-i18n, we could easily access the array like this:
<h2>{{ $t('section.title') }}</h2>
<template v-for="(item, index) in $t('section.highlighted')" :key="item.title">
{{ item.title }}
{{ item.text }}
</template>
However, after upgrading to Nuxt v3 with @nuxtjs/i18n, now the array $t('section.highlighted') displays as individual characters
s
e
c
t
i
o
n
.
h
i
g
h
l
i
g
h
t
e
d
This is my plugin setup in nuxt.config.js
modules: [
'@nuxtjs/i18n',
],
i18n: {
locales: ['en', 'de'],
defaultLocale: 'en',
vueI18n: {
legacy: false,
fallbackLocale: 'en',
messages: {
en,
de
}
}
},
What am I missing? I couldn't find any information about this issue in the migration guide