If I remember correctly, markdown should support nested (html & markdown) syntax.

I think it's too coupled with the template compiler. How about creating a markdown custom block to doing this job? That's more flexible.
Thanks.

Actually I know that my solution is not very suitable for vue-loader. I've tried to use markdown filter in some template engines (e.g pug), but vue-loader can not detect the changes of markdown files which is imported by template engine. It's a critical problem when using webpack-dev-server and I found no way to treat it.

I've read the documentation of custom block, I think it's no so convenient for my case. HTML and markdown and value bindings mixed everywhere, no such a single custom block can hold it. for example:

<template lang="md">
# {{title}}

## {{subtitle}} - The first Component

<x-component></x-component>

## {{subtitle}} - The Second Component

<y-component></y-component>

... and so on
</template>

<script>
import {XComponent, YComponent} from 'somewhere'
export default {
  props: ['title', 'subtitle'],
  components: {
    XComponent,
    YComponent
  }
}
</script>

Anyway, I think you also could try to use markdown loader parser to convert md -> html and then use vue-template-compiler to convert html -> render() in custom block (if consolidate.js won't support markdown). 🤔

I have tried to create a markdown-loader like:

const compiler = require('vue-template-compiler')
const marked = require('marked')

module.exports = function (markdown, map) {
  // markdown -> html
  const html = marked(markdown)
  // html -> render functions
  const { render, staticRenderFns } = compiler.compile(`<div>\n${html}</div>`)
  return `
module.exports = function (Component) {
  Component.options.render = function () {${render}}
  Component.options.staticRenderFns = [${staticRenderFns.join(',')}]
}`
}

And it worked well with:

<markdown>
# {{title}}

## {{subtitle}} - The first Component
</markdown>

<script>
export default {
  data () {
    return {
      title: 'Hello',
      subtitle: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

I think that can help you enough.

Thanks.

Well, I got it. It seems perfect.

Additionally I found another way in our test to have a look: