Vuepress-plugin-demo-container-v2 NPM

Introduction

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
```js
<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