Vue Superman

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 codesandboxopen in new window.

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

npm i vuepress-plugin-sandbox monaco-editor

yarn add vuepress-plugin-sandbox monaco-editor

pnpm add vuepress-plugin-sandbox monaco-editor

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 vuepress@2.0.0-beta.40 and above are supported.

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