Vue-i18n: [Feature Request] Basic Markdown Support for i18n text

Created on 18 Apr 2018  路  2Comments  路  Source: kazupon/vue-i18n

Hello guys,

it would be nice if I could do some basic formatting within my i18n messages (such as italic, bold, lists), which would probably be most easily achieved using (optional) basic markdown support.

This way I could avoid coupling between the text I prepare and the way it has to be inserted in HTML, as I would not have to use interpolation for basic formatting anymore.

Example for how it has to be done currently:

<div id="app">
  <!-- ... -->
  <i18n path="text" tag="p">
    <strong place="boldText">{{ $t('bold') }}</strong>
  </i18n>
  <!-- ... -->
</div>

```js
const messages = {
en: {
text: 'This is {boldText}.'
boldText: 'bold text'
}
}

Example for how I would like to do it:
```html
<div id="app">
  <i18n path="text" tag="p"/>
</div>
const messages = {
  en: {
    text: 'This is __bold text__.'
  }
}

As a result, other people working on my project can add formatted text without concerning themselves how the HTML markup should look. Additionally, this way I can iterate over messages arrays and still have formatted text.

All 2 comments

You can just use the translation in a v-html tag and add html style formazting like <br> <strong> and so on. Styling text isn't really a task for a translation plugin IMO :D

@sem4phor You're right. I realized that nothing stops me from wrapping the <i18n> tags in a markdown renderer, if I require that.

Thanks for the hint.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zecar picture zecar  路  15Comments

leo108 picture leo108  路  15Comments

WangShayne picture WangShayne  路  57Comments

nchutchind picture nchutchind  路  17Comments

tvld picture tvld  路  19Comments