SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 12:45:39 +01:00
Code Issues Projects Releases Packages Activity

Merge dd87e491f3 into ec78a33c7b

Browse source
This commit is contained in:
ohnow 2025-12-17 14:29:21 -05:00 • committed by GitHub
commit 20caef45cc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 1269 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

71
samples/browser-esm-vite-vue/README.md Normal file
View file

@ -0,0 +1,71 @@
# 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
```bash
npm install
```
## Usage
Development mode:
```bash
npm run dev
```
Build for production:
```bash
npm run build
```
Preview production build:
```bash
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:
1. Uses Vue 3 Composition API instead of React Hooks
2. Uses `@vitejs/plugin-vue` instead of `@vitejs/plugin-react`
3. Uses `.vue` single file components instead of `.tsx` files
4. 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

12
samples/browser-esm-vite-vue/index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>browser-esm-vite-vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

1056
samples/browser-esm-vite-vue/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

18
samples/browser-esm-vite-vue/package.json Normal file
View file

@ -0,0 +1,18 @@
{
"name": "browser-esm-vite-vue",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview",
"simpleserver": "node ../node_modules/yaserver/bin/yaserver --root ./dist --port 9999"
},
"dependencies": {},
"devDependencies": {
"monaco-editor": "^0.32.0",
"vue": "^3.3.4",
"@vitejs/plugin-vue": "^2.3.4",
"typescript": "^5.4.5",
"vue-tsc": "^1.8.5",
"vite": "^2.9.17"
}
}

31
samples/browser-esm-vite-vue/src/components/Editor.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div class="editor" ref="editorContainer"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
const editorContainer = ref<HTMLDivElement | null>(null);
let editor: monaco.editor.IStandaloneCodeEditor | null = null;
onMounted(() => {
if (editorContainer.value) {
editor = monaco.editor.create(editorContainer.value, {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'typescript'
});
}
});
onUnmounted(() => {
editor?.dispose();
});
</script>
<style scoped>
.editor {
width: 100vw;
height: 100vh;
}
</style>

5
samples/browser-esm-vite-vue/src/main.ts Normal file
View file

@ -0,0 +1,5 @@
import { createApp } from 'vue';
import Editor from './components/Editor.vue';
import './userWorker';
createApp(Editor).mount('#app');

27
samples/browser-esm-vite-vue/src/userWorker.ts Normal file
View file

@ -0,0 +1,27 @@
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
// @ts-ignore
self.MonacoEnvironment = {
getWorker(_: any, label: string) {
if (label === 'json') {
return new jsonWorker();
}
if (label === 'css' || label === 'scss' || label === 'less') {
return new cssWorker();
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker();
}
if (label === 'typescript' || label === 'javascript') {
return new tsWorker();
}
return new editorWorker();
}
};
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

7
samples/browser-esm-vite-vue/src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1,7 @@
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

25
samples/browser-esm-vite-vue/tsconfig.json Normal file
View file

@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}

10
samples/browser-esm-vite-vue/tsconfig.node.json Normal file
View file

@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

7
samples/browser-esm-vite-vue/vite.config.ts Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
});