Vue Superman

Introduction

vue-playground is a vue3 component based on monaco-editoropen in new window.

It 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 vue-playground monaco-editor

yarn add vue-playground monaco-editor

pnpm add vue-playground monaco-editor

Notice

This component depends on monaco-editoropen in new window and @babel/standaloneopen in new window, So it will be bigger after packing.

Recommended for lowcode projects. Or documentation to write demo .