Introduction

vuepress-plugin-sandbox is a vuepress v2 plugin based on vue-playground.

It is a demo plugin that supports real-time editing, real-time compilation, and real-time preview. Similar to the small codesandbox.

Features

• Real-time editing, real-time compilation (vue3, js, ts, jsx, tsx, css), real-time running, real-time preview
• Support for custom import mapping
• Support to create new files, delete files, support
• Editor supports ts type hinting (.ts files only)
• Support switching layout, support full screen
• Support dark mode
• Support custom theme color

Installation

for npm

npm i vuepress-plugin-sandbox monaco-editor

for yarn

yarn add vuepress-plugin-sandbox monaco-editor

for pnpm

pnpm add vuepress-plugin-sandbox monaco-editor

Usage

The usage is documented in the documentation.

Notice

Because vuepress v2 is still in beta stage, the plugin is not stable yet, but will try to keep up with the latest vuepress v2 version.

Currently [email protected] and above are supported.

Because vuepress-plugin-sandbox is based on vue-playground, which in turn depends on monaco-editor and @babel/standalone, so it will be larger after packaging.

Acknowledgement

• vuejs/repl
• code-kitchen
• vueuse-playground-next

Contributing

Learn about contribution here.

This project exists thanks to all the people who contribute:

License

MIT License © 2022-PRESENT yangjinming