Search code examples
javascriptvue.jsinternationalizationquasar-frameworkvue-i18n

i18n how to use $t in translation file


I'm using vuejs 3, quasar 2 and vue-i18n for my traductions.
how can i use $t or $tc in translation file like this ?
i have the error "$tc is not defined"

export default {
  survey: {
    name: 'Questionnaire' || 'Questionnaires',
    new: 'Nouveau ' + $tc('survey.name', 1) || 'Nouveaux ' + $tc('survey.name', 2),
    wd: 'Un ' + $tc('survey.name', 1) || 'Des ' + $tc('survey.name', 2),
    mine: 'Mon ' + $tc('survey.name', 1) || 'Mes ' + $tc('survey.name', 2),
    show: 'Voir le ' + $tc('survey.name', 1) || 'Voir les ' + $tc('survey.name', 2)
}


Solution

  • You should be able to do this with "Linked Locale Messages" (https://kazupon.github.io/vue-i18n/guide/messages.html#linked-locale-messages)

    So with a messages file something like this:

    const messages = {
      en: {
        message: {
          item: 'Item | Item',
          linked: 'I have got {n} @:message.item'
        }
      }
    }
    

    You would then do

    <div>{{ $t('message.linked', 10) }}</div>

    And the value would be passed along to the linked key.