Markdown and Vue SFC

Each Markdown file is first compiled into HTML, and then converted to a Vue SFC. In other words, you can take Markdown as Vue SFC:

  • Blocks <script> and <style> are treated as Vue SFC blocks as they are. In other words, they are hoisted from the <template> block to the top-level of SFC.
  • Everything outside <script> and <style> will be compiled into HTML, and be treated as Vue SFC <template> block.

Here comes an example:

Input

  1. _Hello, {{ msg }}_
  3. <RedDiv>
  5. _Current count is: {{ count }}_
  7. </RedDiv>
  9. <button @click="count++">Click Me!</button>
  11. <script>
  12. import { h, ref } from 'vue'
  14. const RedDiv = (_, ctx) => h(
  15.   'div',
  16.   {
  17.     class: 'red-div',
  18.   },
  19.   ctx.slots.default()
  20. )
  22. export default {
  23.   components: {
  24.     RedDiv,
  25.   },
  27.   setup() {
  28.     const msg = 'Vue in Markdown'
  29.     const count = ref(0)
  31.     return {
  32.       msg,
  33.       count,
  34.     }
  35.   }
  36. }
  37. </script>
  39. <style>
  40. .red-div {
  41.   color: red;
  42. }
  43. </style>

Output

Hello, Vue in Markdown

Current count is: 0

Click Me!