CODEWITHSUNDEEP
vue.jsinternationalizationvuetify.jsvue-i18n
salihtopcu
salihtopcu

Reputation: 352

Display a component within an i18n text in Vue.js

I want to add a button component in a paragraph text. I can do it manually like the 1st sample below. But, due to my text comes from i18n values, I need to import it in the text. Is there any way to put the button like a variable within the i18n text like the 2nd sample?

<p>
  1) Use
  <v-btn @click="attachmentDialog.show(item)" v-on="on">
    <v-icon small left>mdi-pencil</v-icon>Edit
  </v-btn>
  button to add booking.
</p>
<p>
  2)
  {{ $t("no_booking_info", { buttonName: $t("edit") }) }}
</p>

en.js

export default {
  no_booking_info: "Use {buttonName} button to add booking."
}

code result

Upvotes: 1

Views: 1231

Answers (3)

epeleg
epeleg

Reputation: 10955

The solution provided by @salihtopcu was a great pointer for me but since it was published quite a few changes have occurred.

The more up to date documentation is here:

Major changes are:

  1. You should use <i18n-t> component and not i18n

  2. The path attribute is now keypath.

  3. instead of using {0} you can use named slots for extra readability and flexibility.

    {{ changeLimit }} {{ $t('change') }}

And than you can use {limit} or {action} in the translation of "info".

The key phrase is

"The children of translation component are interpolated with locale message of keypath prop."

Upvotes: 0

salihtopcu
salihtopcu

Reputation: 352

I found something about component interpolation here on vue-i18n documentation.

And this is how I figured my case out:

<i18n path="no_booking_info" tag="p" for="edit">
  <v-btn class="mx-2" @click="editAction">
    <v-icon left>mdi-pencil</v-icon>
      {{ $t("edit") }}
  </v-btn>
</i18n>

en.js

export default {
  no_booking_info: "Use {0} button to add booking.",
  edit: "Edit"
}

Upvotes: 2

Ian Cho
Ian Cho

Reputation: 107

Hope I understand well your question.

Use <v-btn v-html="$t('no_booking_info', { buttonName: $t('edit') })" /> button to add booking.

Upvotes: 0

Related Questions