multiline text using vuejs i18n

Question

I'm using i18n single file component to have translation support on my application. To do so, I'm using the tag as following

<i18n>
{
  "fr": {
    "text": "blabla in french 
             blabla
             bla"
  },
  "en": {
    "text": "blabla in english
             bla"
  }
}
</i18n>

But I have multiple lines text with html formating, how can I use language handling for long html text ?

Answer 1

Found a pretty cool solution here. It is possible to achieve this with Interpolation. In this example, the {0} placeholder will be replaced with what you put into the <i18n> tag.

en.json

{
  "footer": "Built with Vue and Vue I18n{0}Powered by an excessive amount of coffee"
}

Footer.vue

<template>
  <i18n path="footer" tag="p" class="footer">
    <br />
  </i18n>
</template>

Answer 2

You could always use backticks:

<i18n>
{
  "fr": {
    "text": `blabla in french 
             blabla
             bla`
  },
  "en": {
    "text": `blabla in english
             bla`
  }
}
</i18n>

You will get some (harmless) warning about something concerning POJO strings though.