@vuepress-dumi/vuepress-plugin-dumi-previewer

vuepress-plugin-dumi-previewer

English | 简体中文

💡attention: whitespace is in need before demo

::: demo
<div @click="handleClick">click me</div>

<script>
export default {
  methods: {
    handleClick() {
      console.warn('clicked')
    }
  }
}
</script>
:::

If you need code scope, you can use demo[scope].

💡attention: <template></template> is in need, and you can not use import statment in scope mode. And if you use demo[scope] and demo in one markdown file, browser may print some error.

::: demo[scope]
<template>
  <div>{{ foo }}</div>
</template>

<script>
export default {
  data() {
    return { foo: 'foo' }
  }
}
</script>
:::

::: demo[scope]
<template>
  <div>{{ foo }}</div>
</template>

<script>
export default {
  data() {
    return { foo: 'bar' }
  }
}
</script>
:::

Install

• First of all, install vuepress v1.x

• Then install the plugin

$ npm i -D @vuepress-dumi/vuepress-plugin-dumi-previewer
# OR
$ yarn add -D @vuepress-dumi/vuepress-plugin-dumi-previewer

Usage

Write vuepress config

// .vuepress/config.js
module.exports = {
  plugins: ['@vuepress-dumi/dumi-previewer'],
}

Preview

💡attention: if you want to import element-ui like me, you need install async-validator@1.11.5

$ npm i -D async-validator@1.11.5
# OR
$ yarn add -D async-validator@1.11.5

Thanks

This repo is inspired by the following projects, Thanks for their great work.

• dumi
• vuepress-plugin-demo-code