Vue-i18n: How to put HTML elements in translations?

[flaird]

This will print out <br /> instead of a linebreak:

module.exports = {
  en: {
    index: {
       headline: 'Testing html <br /> with i18n'
    }
  }
}

[mcchin]

+1

[aaronjpitts]

Any update with this? Thanks

[aaronjpitts]

If you wrap the translation in 3 brackets like:

{{{ $t("message.hello") }}}

it does actually render the HTML correctly. But is it good practise to do that?

[edouard-lopez]

thanks @aaronjpitts.

[flaird]

I think @aaronjpitts solved this. I'm closing this as it's working for me aswell. Thank you!

[guillaumevincent]

@sagaio could you re-open the issue ? and consider the issue solved when the documentation has clarified the solution ? I can make a pull request for this one if you want.

[flaird]

Sure. Nice PR!
For the record It's also stated on VueJS offical page: http://vuejs.org/guide/syntax.html#Raw_HTML

[edouard-lopez]

@guillaumevincent thanks!
ping @kazupon

[kazupon]

@guillaumevincent
Welcome Pull request :smiley_cat:

[guillaumevincent]

@kazupon the PR is already done :

https://github.com/guillaumevincent/vue-i18n/pull/1

[aaronjpitts]

What would also be great would be able to render functions like v-link and @click. For example say I have the below json:

{
    "message": "This is a message <a v-link="{name: 'linkName'}">with a link</a>"
}

It doesn't render the v-link right now. Is this something you could implement?

As always, thanks

[guillaumevincent]

ping @kazupon

[kazupon]

@guillaumevincent
Can you send to kazupon/vue-i18n PR please ?

[kazupon]

@aaronjpitts
Hmm, :disappointed:
It cannot render the directive as v-link, because it need to compile the directive.

[guillaumevincent]

Sorry @kazupon don't understand what I've done :(
here the good pull request : https://github.com/kazupon/vue-i18n/pull/20