import .md file to render vue template

[Navyroot]

I base on meteor + vue . I try to import .md file to render vue template

<template>
  <div>
       <VueShowdown :markdown="fileContent"></VueShowdown>
  </div>
</template>
<script>
import Vue from 'vue'
import VueShowdown from 'vue-showdown'

// the second parameter of Vue.use() is optional
Vue.use(VueShowdown, {
  // set default flavor of showdown
  flavor: 'github',
  // set default options of showdown (will override the flavor options)
  options: {
    emoji: true,
  },
})
import mdFile from './README.md'
export default {
  name: 'VueMarkdown',
  data() {
    return {
      fileContent: '',
    }
  },
  mounted() {
    this.getMDFile()
  },
  methods: {
    getMDFile() {
      this.fileContent = mdFile
    },
  },
}
</script>

But it got error :

 [Vue warn]: Failed to resolve async component: function () {
    return module.dynamicImport('./Vue-Markdown.vue');
  }
Reason: Error: Cannot find module './README.md'

[meteorlxy]

You need to set some webpack loader to resolve .md files as string.

Take raw-loader for example:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/i,
        use: 'raw-loader',
      },
    ],
  },
};

[Navyroot]

Thank, I will try it 😃

[Navyroot]

It's work 😄