Search code examples
vue.jsvuejs3vue-i18n

How to pass parameters to Vue.js i18n <i18n-t> tag

I'm using the vue.js i18n package and more specifically, the i18n-t tag to do a translation, but I cannot find anywhere in the documentation how can I pass parameters? Here is the tag...

  <i18n-t :keypath="title" scope="parent">
  </i18n-t>

Normally I pass the parameters using v-t notation...

  v-t="{ path: title, args: { param1: 'value' } }

But I use the component as it is the only way I found so far to access the translations in the parent scope...

Solution

  • If your translation with param is something like:

    messages: {
  en: {
    title: 'Some {value} title.',
  }
}

    you can try with slots syntax:

    <i18n-t keypath="title" tag="p">
  <template v-slot:value>
    <span>{{ myValue }}</span>
  </template>
</i18n-t>