VuePressVuePress
  • Introduction
  • Getting Started
  • Configuration
  • Page
  • Markdown
  • Assets
  • I18n
  • Deployment
  • Theme
  • Plugin
  • Bundler
  • Migrating from v1
  • Troubleshooting
  • Core

    • CLI
    • Config
    • Frontmatter
    • Built-in Components
    • Plugin API
    • Theme API
    • Client API
    • Node API
  • Bundlers

    • Vite
    • Webpack
  • Ecosystem

    • Default Theme
    • Plugins
  • Advanced

    • Architecture
    • Writing a Plugin
    • Writing a Theme
    • Cookbook
  • Resources

    • Ecosystem
    • MarketPlace
    • Contributing Guide
  • Changelog
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • Introduction
  • Getting Started
  • Configuration
  • Page
  • Markdown
  • Assets
  • I18n
  • Deployment
  • Theme
  • Plugin
  • Bundler
  • Migrating from v1
  • Troubleshooting
  • Core

    • CLI
    • Config
    • Frontmatter
    • Built-in Components
    • Plugin API
    • Theme API
    • Client API
    • Node API
  • Bundlers

    • Vite
    • Webpack
  • Ecosystem

    • Default Theme
    • Plugins
  • Advanced

    • Architecture
    • Writing a Plugin
    • Writing a Theme
    • Cookbook
  • Resources

    • Ecosystem
    • MarketPlace
    • Contributing Guide
  • Changelog
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • Advanced

    • Architecture
    • Writing a Plugin
    • Writing a Theme
  • Cookbook

    • Introduction
    • Usage of Client Config
    • Adding Extra Pages
    • Making a Theme Extendable
    • Passing Data to Client Code
    • Markdown and Vue SFC
    • Resolving Routes

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.

Warning

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

Here comes an example:

Input

markdown-and-vue-sfc.md
_Hello, {{ msg }}_

<RedDiv>

_Current count is: {{ count }}_

</RedDiv>

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

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

const RedDiv = (_, ctx) =>
  h(
    'div',
    {
      class: 'red-div',
    },
    ctx.slots.default(),
  )
const msg = 'Vue in Markdown'
const count = ref(0)
</script>

<style>
.red-div {
  color: red;
}
</style>

Output

Hello, Vue in Markdown

Current count is: 0

Edit this page on GitHub
Last Updated:: 1/3/24, 6:15 AM
Contributors: meteorlxy, Mr.Hope, Xinyu Liu
Prev
Passing Data to Client Code
Next
Resolving Routes