Web Dev question: Does anyone happen to know to combine vue, i18n and markdown pages?

[folaht]

I know this isn’t safedev question, but I am desperate to get this question answered and haven’t gotten one at the vue forum.

Having liked Grav so much,
a php-based CMS that uses markdown files including in translation,
I’m trying to do the same thing in vue by combining vue-18n with vue-markdown-loader.

This is my attempt to get it working:

Home.vue

<template>
  <div v-html="$t('page')">
  </div>
</template>

<script>
import Page from '@/components/BonjourLeMonde.md'

export default {
  name: 'home',
  components: {
    Page
  }
}
</script>

<i18n>
{
  "en": {
    "page": "<h1>Welcome to my homepage!</h1><br>Doesn't this look awesome?"
  },
  "fr": {
    "page": "Non? <Page />"
  }
}
</i18n>

BonjourLeMonde.md

# Bonjour tout le monde!

Bienvenue pour mon site de web.

It can load html tags, but it doesn’t load scripts I guess.

Does anyone know a solution to this?

Link to example code.

[folaht]

Solved by using VueSimpleInlineTranslation.

Home.md

<template>
  <div>
    <translate :current-language="$i18n.locale" language="en"><PageEN /></translate>
    <translate :current-language="$i18n.locale" language="fr"><PageFR /></translate>
  </div>
</template>

<script>
import { VueSimpleInlineTranslation } from '@alidrus/vue-simple-inline-translation'
import PageEN from '@/components/HelloWorld.md'
import PageFR from '@/components/BonjourLeMonde.md'

export default {
  name: 'home',
  components: {
    translate: VueSimpleInlineTranslation,
    PageEN,
    PageFR
  }
}
</script>