Skip to content
Advertisement

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)
}

Answer

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.

Advertisement