breaking change: Can't use nested arrays or arrays of objects needed for Page content or Language list

Reporting a bug?

In vue-i18n v8.0.0, I was able use nested arrays of objects to manage translatable content for “About” or “FAQ” pages. Just tried using in vue-i18n: 9.2.0-beta.26 and found this very important feature appears to be missing. I realise this is known limitation documented in your Migration guide.

This is a bit of a show stopper for porting from v2 Vue. Without this feature I’ll have to resort to some awful data transformations to get this feature back using i18n v9 or toss this library and find/build an alternative.

IMHO arrays and arrays of objects are essential for translatable content. I use them for things like the list of Languages to select from (so language names are translated). The same issue applies for any static selection list. Frequently these static lists contain multiple locale specific field values. For offline support, lazy loading and other performance reasons they belong in vue-i18n locale files but frustratingly this is now not supported by Vue 3.

Someone else mentioned this in #75 .

Examples:

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

  interface Section {
    heading: string;
    body: string[]
  }

  const names = t('heroPage.names')   //  is undefined
  const content = t('heroPage.content')  as unknown as Section[];  // is undefined
</script>

i18n/en-US/index.ts …

export default {
  heroPage: {
    title: Super Hero Powers",
    names: ["Clark Kent", "Peter Parker"],
    content: [
      {
        heading: "Superman can ...",
        body: [
         "Flight. 'You will believe a man can fly,' the 1978 movie promised, and they were right.",
         "Super Strength. Superman's other most famous power is that he's strong.",
         "Invulnerability.",
         "Super Speed.",
         "Super Hearing.",
         "Solar Flare.",
         "Turning Diamonds Into Coal.",
         "Super Disco Dancer!"
        ]
      },
      {
        heading: "Spiderman powers ...",
        body: [
          "Superhuman Strength.",
          "Superhuman Speed.",
          "Superhuman Reflexes.",
          "Superhuman Durability.",
          "Healing Factor.",
          "'Spider-Sense' Alert.",
          "Heightened Senses.",
          "Wallcrawling. "       
        ]
      }
    ]
  }
}

Expected behavior

(1) Return nested arrays or strings or objects and (2) Permit typecasting of translatable content:

const names = t<string[]>(‘heroPage.names’) const content = t<Section[]>(‘heroPage.content’) ;

Reproduction

I think the example above should be sufficient to reproduce it. Buzz me if you disagree.

System Info

I'm using YARN not NPM. 


  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "firebase": "^9.6.3",
    "firebaseui": "^0.600.0",
    "pinia": "^2.0.9",
    "quasar": "^2.0.0",
    "vue-i18n": "^9.2.0-beta.26"
  },

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion
• The provided reproduction is a minimal reproducible example of the bug.

[PeterAlfredLee]

@tohagan here is a example:

<template>
  <p v-for="name in tm('heroPage.names')" :key="name">
    {{ rt(name) }}
  </p>
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { tm, rt } = useI18n();
    return { rt, tm }
  }
}
</script>

[tohagan]

Ok I it now runs - just has TS Warnings about never type.