How about some interactivity inside a note?
...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).