Best way to work with Vue I18n and big content text html

Question

I have to put a lot of text in my views. These texts are tagged in HTML.

Currently, with Vue l18n, I have an en.json file that looks like that

{
  "ok": "Ok",
  "cancel": "Cancel",
  "error_alert_title": "Oops...",
  …
}

To translate a word or a single line, I do this in my component.

$t('cancel')

It works well !

Now, I'd like to know your method for translating big text into .vue. I tried to put it in the JSON file but it's ... impossible to maintain.

"mytext": "<p style="text-align: left;">Maecenasfaucibusmollisinterdum. Fuscedapibus, tellus ac cursuscommodo, tortormauriscondimentumnibh, utfermentummassajusto</p><p style="text-align: left;"><strong>sit amet risus. Donec sed</strong> odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Duis mollis,</p><p style="text-align: left;">est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Curabitur blandit</p><p style="text-align: left;">tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.<br /><br /></p>"

Do you have a pleasant solution to use and easy to maintain?

Thank you

score 0 · Answer 1 · answered Feb 03 '22 at 05:39

Instead of putting HTML element into language JSON file. You can directly translate the inner text in HTML template itself.

en.json :

{
    'p1Text': 'Maecenasfaucibusmollisinterdum. Fuscedapibus, tellus ac cursuscommodo, tortormauriscondimentumnibh, utfermentummassajusto',
    'p2Text': '{strongText} odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Duis mollis',
    'p2StrongText': 'sit amet risus. Donec sed',
    'p3Text': 'est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.Curabitur blandit',
    'p4Text': 'tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.'
}

Template will look like this :

<p style="text-align: left;">{{ $t('p1Text') }}</p>
<i18n path="p2Text" style="text-align: left;" tag="p">
  <template v-slot:strongText>
    <strong>{{ $t('p2StrongText') }}</strong>
  </template>
</i18n>
<p style="text-align: left;">{{ $t('p3Text') }}</p>
<p style="text-align: left;">{{ $t('p4Text') }}<br/><br/></p>

Best way to work with Vue I18n and big content text html

1 Answers1