mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 12:45:39 +01:00

History

Dennis Chen dd87e491f3 Update README.md		2025-09-17 14:33:06 +08:00
..
src	Add sample for vite + vue	2025-09-17 14:30:28 +08:00
index.html	Add sample for vite + vue	2025-09-17 14:30:28 +08:00
package-lock.json	Add sample for vite + vue	2025-09-17 14:30:28 +08:00
package.json	Add sample for vite + vue	2025-09-17 14:30:28 +08:00
README.md	Update README.md	2025-09-17 14:33:06 +08:00
tsconfig.json	Add sample for vite + vue	2025-09-17 14:30:28 +08:00
tsconfig.node.json	Add sample for vite + vue	2025-09-17 14:30:28 +08:00
vite.config.ts	Add sample for vite + vue	2025-09-17 14:30:28 +08:00

README.md

Monaco Editor with Vue.js and Vite

This is a sample project using Vue.js 3, Vite, and Monaco Editor.

Features

✅ Vue.js 3 Composition API
✅ TypeScript support
✅ Vite build tool
✅ Monaco Editor integration
✅ Syntax highlighting and code completion
✅ Multi-language support (TypeScript, JavaScript, JSON, CSS, HTML)

Installation

npm install

Usage

Development mode:

npm run dev

Build for production:

npm run build

Preview production build:

npm run serve

Project Structure

src/
├── components/
│   └── Editor.vue          # Monaco Editor component
├── main.ts                 # Vue app entry
├── userWorker.ts           # Monaco Editor Workers config
└── vite-env.d.ts           # TypeScript type declarations

Tech Stack

Vue.js 3
TypeScript
Vite
Monaco Editor

Comparison with React Version

This Vue version has the same features as the React version. Main differences:

Uses Vue 3 Composition API instead of React Hooks
Uses @vitejs/plugin-vue instead of @vitejs/plugin-react
Uses .vue single file components instead of .tsx files
Uses createApp instead of ReactDOM.render

Monaco Editor Configuration

Monaco Editor runs via Web Workers and supports the following languages:

TypeScript/JavaScript
JSON
CSS/SCSS/Less
HTML/Handlebars/Razor