vue-playground

A code editor runner, real-time editing, real-time compilation, real-time preview.

English | 简体中文

Introduction

vue-playground is a vue3 component based on monaco-editor.

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

for yarn

yarn add vue-playground monaco-editor

for pnpm

pnpm add vue-playground monaco-editor

Usage

The usage is documented in the documentation.

Notice

This component depends on monaco-editor and @babel/standalone, So it will be bigger after packing.

Recommended for lowcode projects. Or documentation to write demo .

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