Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
108 lines (76 sloc) 1.91 KB
title layout
Using Vue in Markdown
docs

Interpolation

Markdown code is compiled to HTML first and then compiled to Vue render function, for example:

Hello **Saber**!

compiles to:

function render() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c('p', [
    _vm._v('Hello '),
    _c('strong', [_vm._v('Saber')]),
    _vm._v('!')
  ])
}

This means you can use Vue-style interpolation in Markdown like this:

This result of 1 + 1 is: {{ 1 + 1 }}

It renders:

This result of 1 + 1 is: {{ 1 + 1 }}

If you want to disable Vue-style interpolation for a part of your Markdown page, you can wrap it inside code fence, inline code or using the v-pre attribute as follows:

```js
const foo = `{{ safe, this won't be interpolated! }}`
```

And `{{ bar }}` is safe too! <span v-pre>{{ yeah }}</span>

It renders:

const foo = `{{ safe, this won't be interpolated! }}`

And {{ bar }} is safe too! {{ yeah }}

<script> block

<script> tag in Markdown page is not normal HTML <script> element, it's treated as Vue SFC <script> block instead.

**This is an example:**

<button @click="count++">{{ count }}</button>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

It renders:

This is an example:

<button @click="count++">{{ count }}

<script> export default { data() { return { count: 0 } } } </script>

Like a regular Vue single-file component, your Markdown page can have at most one script block.

<style> block

<style> tags in Markdown page are not HTML <style> elements either, they are Vue SFC <style> blocks.

You can’t perform that action at this time.