@panzhiyue/vuepress-plugin-demo-container-v2

Introduction

中文 README

Demo Container V2 is a Vuepress-based plug-in, which can help you add Vue examples when writing documents.

It can help you:

1. Write an example to automatically generate component examples and code examples by the custom ::: demo syntax;
2. 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 -->
:::

View full documentation

Thanks

This project is heavily inspired by the md-loader of ElemeFE team.

Contributors

License

MIT License @2020-PRESENT Wayco Wei