How to handle longer texts with mixed HTML

[thedamon]

How do you store i18n values that are longer-form .. ie paragraphs, lists etc. say 3 paragraphs with links and some list items, if we want to avoid storing HTML inside our messages.

We've followed the vue-i18n locale messages pattern in the past but it seems odd to have soemthing like:

<p>`$t('app.introText.paragraph1')</p>
<p>`$t('app.introText.paragraph2')</p>
<ul>
  <li><p>`$t('app.introText.list1item1')</p></li>
  <li><p>`$t('app.introText.list1item2')</p></li>
</ul>

Using arrays in messages is maybe a little more maintainable/less weird:

<p v-for="p in $tm('app.introTextParagraphs')">{{ p }}</p>
<p>`$t('app.introText.paragraph2')</p>
<ul if="$te('app.introTextList1')>
  <li v-for="item in $tm('app.introTextList1')">{{ item }}</li>
</ul>

But still seems wrong, and if there are interpolations it gets even weirder and tightly couples the translation to the component anyway.. and if it's so tightly coupled, is it actually better to just have a locale if/else block here to not be so dependent on the structure of the content?

I'm tempted to just make locale based versions of some components and do it inline, but that has its own drawbacks. (and makes me wish we had a component to help us like:

<template>
<i18n-locale>
<template #en>
  <p></p><ul>... etc
</template>
<template #fr>
  <p></p><ul>... etc
</template>
</i18n-locale>
</templage>

Curious to see what other people are finding to work!