markdown in slots

[thib-wien]

Imagine if Vue allowed for something like

<div :markdown>
 # Why?
 The `markdown` feature saves *time* and _lines of code_
 in some cases:
 - blablabla
 - ...
</div>

This would be particularly useful with text generated from i18n.
We could output text in any language with just

<div :markdown>
 {{ $t('my_text') }}
</div>

by writing this in en.json:

"my_text": "As we like both, the [chocolate](chocolink) that you bring *may* be dark or with milk."

and in de.json:

"my_text": "Da wir beide mögen, *darf* die [Schokolade](chocolink), die du bringst, dunkel oder mit Milch sein."

(chocolink would be a variable/ref in the component calling $t)

... instead of the current situation where we deal with two very different structures (you noticed that the languages put the bold word and the link in incompatible orders) and we therefore need to:

• hard-code language structures with v-if v-else and stuff like <a> <b>,
• create more code, slowing development down,
• create redundant language data (json + html), if one is changed then the other breaks (bad maintainability):

<div>
  <span v-if="language is english">
    {{ $t('my_text.first') }}
    <RouterLink :to="chocolink">{{ $t('my_text.second') }}</RouterLink>
    {{ $t('my_text.third') }} <b>{{ $t('my_text.fourth') }}</b> {{ $t('my_text.fifth') }}
  </span>
  <span v-else-if="language is german">
    {{ $t('my_text.first') }}
    <b>{{ $t('my_text.second') }}</b>
    {{ $t('my_text.third') }}
    <RouterLink :to="chocolink">{{ $t('my_text.fourth') }}</RouterLink>
    {{ $t('my_text.fifth') }}
  </span>
</div>