How about some interactivity inside a note?

0

...and here's the code that implements the above button:

<p>
  <button @click="count++" :disabled="!mounted">{{count}}</button>
</p>

<script>
  export default {
    setup() {
      const count = Vue.ref(0)
      const mounted = Vue.ref(false)
      Vue.onMounted(() => {
        mounted.value = true
      })
      return { hello: 'Hello, World', count, mounted }
    },
  }
</script>

Here's how it works:

• In the contents API, when the Markdown file is parsed, @vuepress/markdown automatically extracts out the <script> and <style> tags. I assume that there will be only one <script> tag. If one is found, then the contents of the <script> tag is compiled down to ES6 + CommonJS using esbuild(opens new window). This compiled JavaScript is then returned over the wire.

• In the Nuxt app, if a component module is included in the response, Nuxt will compile that code as part of the Vue component, on-the-fly, at runtime.

This results in the following markup:

For full changes, see the pull request(opens new window).