@panzhiyue/vuepress-plugin-demo-container-v2
v1.0.3
Published
Vuepress plugin for demo block.
Downloads
1
Maintainers
Readme
Introduction
Demo Container V2
is a Vuepress-based
plug-in, which can help you add Vue
examples when writing documents.
It can help you:
- Write an example to automatically generate component examples and code examples by the custom
::: demo
syntax; - Support the
import
syntax in code example;
Install
Use yarn
:
yarn add vuepress-plugin-demo-container-v2 -D
Or npm
:
npm i vuepress-plugin-demo-container-v2 -D
Usage
Open the .vuepress/config.js
file, and then reference the plugin in the appropriate location:
module.exports = {
plugins: ['demo-container-v2']
}
Write the following code in the Markdown file:
::: demo
```vue
<template>
<div>
<p>{{ message }}</p>
<input v-model="message" placeholder="Input something..."/>
</div>
</template>
<script>
import { ref } from 'vue-demi'
export default {
setup () {
const message = ref('Hello Here')
return {
message
}
}
}
</script>
` ``
<!-- ignore space in the previous line -->
:::
Thanks
This project is heavily inspired by the md-loader of ElemeFE team.
Contributors
License
MIT License @2020-PRESENT Wayco Wei