@vuepress-denaro/vuepress-plugin-vue-preview

vuepress-plugin-vue-preview

🎉 Preview vue component effects on your vuepress site.在你的 vuepress 站点上预览 vue 组件效果.

Usage

• Install

# npm
npm install @vuepress-denaro/vuepress-plugin-vue-preview

# yarn
yarn add @vuepress-denaro/vuepress-plugin-vue-preview

• Update plugins in .vuepress/config.js or .vuepress/config.ts

js

const {
  vuePreviewPlugin,
} = require('@vuepress-denaro/vuepress-plugin-vue-preview')
module.exports = {
  plugins: [
    vuePreviewPlugin({
      rootPath: '', // Replacement path for '@root'
    }),
  ],
}

ts

import { vuePreviewPlugin } from '@vuepress-denaro/vuepress-plugin-vue-preview'
import { defineUserConfig } from '@vuepress/cli'

export default defineUserConfig({
  plugins: [
    vuePreviewPlugin({
      rootPath: '', // Replacement path for '@root'
    }),
  ],
})

• Write markdown

single file import

@[code]{@/.vuepress/vue-previews/demo.vue}

vue component import

@[preview-demo]{@/.vuepress/vue-previews/demo.vue}

the vue group only shows the code group

@[preview]{@/.vuepress/vue-previews/demo.vue}

documentation for generating vue files

@[docvue]{@/.vuepress/vue-previews/demo.vue}

Thanks

vuepress-plugin-vue-preview