How do I combine vue, i18n and markdown pages?

Question

I’m trying to use markdown pages as translations in vue.

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.

Unfortunately, while html tags can be read, imports are not being loaded.

Does anyone know a solution to this?

Link to example code.

score 2 · Answer 1 · edited Jul 15 '22 at 23:07

You can't use v-html with Vue component. From the document v-html:

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead.

However you can still achieve this by using dynamic component and compile function.

Render.vue

<template>
  <component :is="result"/>
</template>

<script>
  import Vue from 'vue'

  export default {
    props: {
      html: String
    },

    computed: {
      result () {
        return Vue.compile(this.html)
      }
    }
  }
</script>

Then use it instead of v-html:

<Render :html="$t('page')"/>

Register your components as global components (If you want to register locally you can pass your components into Render and register it with the result of compile function):

Vue.component('Post', Post)

Note: Vue.compile only available in the full build you have to add runtimeCompiler: true in vue.config.js.

I wish I could double thank you, because you did help me find the solution. — Folaht, Jun 03 '19 at 06:38

score -1 · Answer 2 · answered Jun 03 '19 at 06:27

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>

I wonder what's the advantage of this package compared to v-if? I look into the source code but not much understand. Thanks. — User 28, Jun 03 '19 at 07:47

How do I combine vue, i18n and markdown pages?

2 Answers2