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

1.4 KiB Raw Blame History