## Introduction
`vue-playground` is a `vue3` component based on [monaco-editor](https://github.com/microsoft/monaco-editor).
It supports real-time editing, real-time compilation, and real-time preview. Similar to the small [codesandbox](https://codesandbox.io/).
## 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
```bash
npm i vue-playground monaco-editor
```
for yarn
```bash
yarn add vue-playground monaco-editor
```
for pnpm
```bash
pnpm add vue-playground monaco-editor
```
## Usage
The usage is documented in the [documentation](https://vue-superman.vercel.app/libs/vue-playground/).
## Notice
This component depends on [monaco-editor](https://github.com/microsoft/monaco-editor) and [@babel/standalone](https://babeljs.io/docs/en/babel-standalone), So it will be bigger after packing.
Recommended for lowcode projects. Or documentation to write demo .
## Acknowledgement
- [vuejs/repl](https://github.com/vuejs/repl)
- [code-kitchen](https://github.com/freewheel/code-kitchen)
- [vueuse-playground-next](https://github.com/wheatjs/vueuse-playground-next)
## Contributing
Learn about contribution [here](https://github.com/2214962083/vue-superman/blob/master/CONTRIBUTING.md).
This project exists thanks to all the people who contribute:
