Adding hyperlink with href to named formatting I18n vuejs

Question

I've looked at the vue documentation on this page to see how I can solve this: https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting

I think i have all the syntaxes correct and I have tried many different scenarios with the href code.

This is the english translated file from my json file:

"link": {
  "text": "Click this {Url} link."
}

This is from my template:

 {{ $t("Message.link.text", { Url: <a href="https://www.google.com/" target="_blank">www.google.com</a> }) }}

This does not work and it displays {{ $t("Message.link.text", { Url: www.google.com }) }} in the UI.

Appreciate all the help I can get, thanks in advance!

score 2 · Accepted Answer · answered Oct 06 '21 at 15:18

You cannot output HTML with interpolation ({{ }} syntax) in Vue. You can use v-html for that but it is dangerous (see the warnings in the docs)

Use Component interpolation instead:

"link": {
  "text": "Click this {url}.",
  "link": "link",
}

Template:

  <i18n path="Message.link.text" tag="p">
    <template v-slot:url>
      <a href="https://www.google.com/" target="_blank">{{ $t('Message.link.link') }}</a>
    </template>
  </i18n>

Adding hyperlink with href to named formatting I18n vuejs

1 Answers1