Vuepress Plugin Demo Container

Theme by Calebman

|

Updated: 27 Aug 2020

|

116 Stars

Vuepress plugin for demo block.

Categories

Overview

Demo Container is a Vuepress-based plugin designed to simplify the process of adding Vue examples to documents. It aims to address the following challenges faced when using Vuepress to write component examples:

• Needing to write component examples and sample code twice.
• Inability to render the export default {} code block in Markdown.

Features

• Vuepress-based Plug-in: Demo Container is built on top of Vuepress, providing a seamless integration within the framework.
• Simplification of Example Writing: By using Demo Container, the difficulty of adding related examples when writing component documents is significantly reduced.
• Syntax Similar to Element UI: The syntax used by Demo Container is similar to Element UI’s document rendering, allowing for direct writing of sample syntax in Markdown.

Installation

To install Demo Container, follow these steps:

1. Install the demo-container package using NPM or Yarn:

npm install demo-container --save-dev

or

yarn add demo-container --dev

2. Import the plugin in your Vuepress configuration file (config.js):

plugins: [
  'demo-container'
]

Summary

Demo Container is a useful Vuepress-based plugin that simplifies the task of adding Vue examples to documents. It resolves the challenges of duplicating component examples and the inability to render the export default {} code block in Markdown. With its syntax similar to Element UI’s document rendering, writing sample syntax directly in Markdown becomes effortless. Overall, Demo Container is a valuable tool for Vuepress users looking to enhance their documentation with Vue examples.