Reports

The template injections (e.g. $t, $tm) won't handle types correctly. So, the problem is not about using JSON. You would face the same issue even if you use .ts or .yaml files to store the i18n files.

You need to use the methods you want through useI18n() to get the proper types. Here is an example:

<template>
  <q-page>
    <div>
      <q-card v-for="country in tm('page.landing.countries')" :key="country.code">
        <q-card-section>
          <q-card-section>
            <div> {{ rt(country.name) }} </div>
          </q-card-section>
        </q-card-section>
      </q-card>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { tm, rt } = useI18n();
</script>

For this reason, when using TypeScript, I would recommend always using useI18n explicitly rather than using template injections. You will also see that you start getting autocompletion in i18n keys, e.g. t('will-get-autocomplete-here')

79093302