How to get translations as object/array with vue-i18n-bridge ?

[ricardo17coelho]

I'm trying to integrate vue-i18n-bridge into my project.

• i'm usign Vue 2.7 and vue-i18n@8

I followed this migration/examples: https://vue-i18n.intlify.dev/guide/migration/vue2.html

On my project i have some translations like:

...
	"further_steps": {
		"items": {
			"some_key": "Text 1",
			"some_key_2": "text 2"
		},
		"title": "Further steps"
	}
...

where i get the items and display it as list:

const items = this.$t('further_steps.items') -> i need the items here as `Obejct`

After install vue-i18n-bridge and initialize it like the example above, getting the items no longer works.
i'm getting this warning:

[intlify] Not found 'further_steps.items' key in 'en' locale messages.

After search in the issues, i found this related issues:

• Can't iterate over yaml array of strings  #614
• can't get defined objects or array used vue-in18next grammar in composition mode  #380
• Curious why object/array returns from $t are removed? #75
• breaking change: Can't use nested arrays or arrays of objects needed for Page content or Language list #885

but it looks like tm and rt are not available.
How can i do this ?

[ricardo17coelho]

@kazupon maybe u have an idea 😊😜

[ricardo17coelho]

If i use this.$i18n.t() -> works 🤔

[lorenzofiamingo]

I created this plugin in nuxt i18n, that can be easily adapted for vue i18n (then in my templates is use $td instead of $t):

import { defineNuxtPlugin } from '#app'
import { useI18n, type VueMessageType } from 'vue-i18n'

export default defineNuxtPlugin(() => {
  const translateDeep = (resource: unknown, currentKeypath: string): unknown => {
    if (useI18n().te(currentKeypath)) {
      return useI18n().rt(resource as VueMessageType)
    } else if (Array.isArray(resource)) {
      return resource.map((r, index) => translateDeep(r, `${currentKeypath}.${index}`))
    } else if (typeof resource === 'object') {
      return Object.fromEntries(
        Object.entries(resource as { [s: string]: unknown }).map(([key, value]) => [
          key,
          translateDeep(value, `${currentKeypath}.${key}`),
        ])
      )
    } else {
      return undefined
    }
  }

  const td = <T>(key: string): T => translateDeep(useI18n().tm(key), key) as T

  return {
    provide: { td },
  }
})

Note that $td is not supporting plurals, placeholders, etc.