Skip to main content

Markdown and Vue SFC

Less than 1 minute

Markdown and Vue SFC

Each Markdown file is first compiled into HTML, and then converted to a Vue SFC. In other words, you can write a Markdown file like a 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.


As Vue SFC can contain only one <script> element, you should avoid using more than one <script> in VuePress markdown.

Here comes an example:


_Hello, {{ msg }}_


_Current count is: {{ count }}_


<button @click="count++">Click Me!</button>

<script setup>
import { h, ref } from "vue";

const RedDiv = (_, ctx) =>
      class: "red-div",
const msg = "Vue in Markdown";
const count = ref(0);

.red-div {
  color: red;


Hello, Vue in Markdown

Current count is: 0