Monaco Editor Vue3

!npm
!npm
!NPM
!npm bundle size

Monaco Editor is the code editor that powers VS Code, now it's available as Vue 3 components and with full TypeScript support and modern Vue 3 features.

✨ Features

- 🎯 Full TypeScript Support - Built with TypeScript for better development experience
- 🎨 Rich Code Editing - Syntax highlighting, auto-completion, IntelliSense
- 🌍 Multi-Language Support - 20+ programming languages including JavaScript, TypeScript, Python, Java
- 🎭 Theme Customization - Built-in themes (VS, VS Dark, High Contrast) with custom theme support
- 🔄 Two-Way Binding - Full v-model support for seamless Vue 3 integration
- 📦 Lightweight - Tree-shakable and optimized for production
- 🛠 Developer Friendly - Comprehensive error handling, loading states, and lifecycle hooks
- 🎪 Advanced Features - Dual editor support (CodeEditor + DiffEditor), Hooks API, custom components

📚 Documentation

- 📖 Complete Guide
- 🔧 API Reference
- 🎮 Examples
- 🌐 Live Demo

📦 Install

``bash


Using pnpm (recommended)

pnpm add monaco-editor-vue3 monaco-editor

Using yarn

yarn add monaco-editor-vue3 monaco-editor

Using npm

npm install monaco-editor-vue3 monaco-editor
`

🚀 Quick Start

$3

`vue



`

$3

`vue



`

⚙️ Build Tool Integration

$3

Use monaco-editor-webpack-plugin:

`js
// webpack.config.js
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
plugins: [
new MonacoEditorPlugin({
// https://github.com/Microsoft/monaco-editor-webpack-plugin#options
// Include a subset of languages support
// Some language extensions like typescript are so huge that may impact build performance
// e.g. Build full languages support with webpack 4.0 takes over 80 seconds
// Languages are loaded on demand at runtime
languages: ['javascript', 'css', 'html', 'typescript'],
}),
],
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};
`

$3

For Vite projects, the CSS import is handled automatically.

`ts
// main.ts
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
`

Check out our live demo for a complete Vite setup.

$3

Use rollup-plugin-monaco-editor:

`js
// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import commonjs from '@rollup/plugin-commonjs';
import monaco from 'rollup-plugin-monaco-editor';

export default {
output: {
format: 'es',
dir: 'dist',
},
// ...other config
plugins: [
// ...other plugins
// Handle .css files (important for Monaco Editor Vue3 styles)
postcss({
extract: true,
minimize: true,
}),
monaco({
languages: ['json'],
}),
nodeResolve(),
commonjs(),
],
};
`

🎨 Supported Languages & Themes

$3

Monaco Editor Vue3 supports 20+ programming languages:

| Language | Identifier | Features |
|----------|------------|----------|
| JavaScript | javascript | ✅ Syntax highlighting, IntelliSense, Error detection |
| TypeScript | typescript | ✅ Syntax highlighting, IntelliSense, Type checking |
| JSON | json | ✅ Syntax highlighting, Validation, Formatting |
| HTML | html | ✅ Syntax highlighting, Auto-completion |
| CSS | css | ✅ Syntax highlighting, Color decorators |
| Python | python | ✅ Syntax highlighting, Basic IntelliSense |
| Java | java | ✅ Syntax highlighting, Basic IntelliSense |
| C++ | cpp | ✅ Syntax highlighting |
| SQL | sql | ✅ Syntax highlighting, Keywords |
| Markdown | markdown | ✅ Syntax highlighting, Preview |

And many more: xml, yaml, shell, php, go, rust, swift, etc.

$3

| Theme | Identifier | Description |
|-------|------------|-------------|
| VS Light | vs | Light theme similar to VS Code light |
| VS Dark | vs-dark | Dark theme similar to VS Code dark |
| High Contrast Black | hc-black | High contrast dark theme |
| High Contrast Light | hc-light | High contrast light theme |

$3

`vue

`

🎮 API Overview

$3

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| value | string | '' | Editor content (supports v-model) |
| language | string | 'javascript' | Programming language |
| theme | string | 'vs' | Editor theme |
| width | string \| number | '100%' | Editor width |
| height | string \| number | '100%' | Editor height |
| options | EditorOptions | {} | Monaco editor options |

$3

#### editorWillMount

- Params: monaco - Monaco module
- Description: Called before mounting the editor

#### editorDidMount

- Params: editor - IStandaloneCodeEditor for CodeEditor, IStandaloneDiffEditor for DiffEditor
- Description: Called when the editor is mounted

#### change

- Params:
- value - New editor value
- event - The event from onDidChangeModelContent
- Description: Editor value is updated

$3

#### Loading State & Error Handling

`vue

`

#### Hooks API

`vue

`

🔧 TypeScript Support

Monaco Editor Vue3 is built with TypeScript and provides comprehensive type definitions out of the box.

$3

`vue

`

$3

`ts
import type {
IStandaloneCodeEditor,
IStandaloneDiffEditor
} from 'monaco-editor';

// CodeEditor instance type
const handleCodeEditorMount = (editor: IStandaloneCodeEditor) => {
editor.focus();
};

// DiffEditor instance type
const handleDiffEditorMount = (editor: IStandaloneDiffEditor) => {
editor.getOriginalEditor().focus();
};
`

$3

If you encounter any type issues, create types/monaco-editor-vue3.d.ts:

`ts
declare module 'monaco-editor-vue3' {
// Custom type declarations
}
`

🔧 Troubleshooting

$3

$3

| Issue | Solution |
|-------|----------|
| Editor container is empty | 样式文件依赖说明已移除 |
| Loading spinner not showing | 样式文件依赖说明已移除 |
| Error boundary not styled | 样式文件依赖说明已移除 |
| Custom themes not working | Check if Monaco Editor worker files are loaded correctly |

$3

If you encounter build issues:

1. Webpack: Ensure you're using monaco-editor-webpack-plugin
2. Vite: Configure worker files properly (see our live demo)
3. Rollup: Use rollup-plugin-monaco-editor and postcss for CSS processing

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

$3

`bash


Clone the repository

git clone https://github.com/bazingaedward/monaco-editor-vue3.git
cd monaco-editor-vue3

Install dependencies

pnpm install

Start development server

pnpm dev

Run tests

pnpm test

Build the project

pnpm build
`

$3

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Make your changes and add tests
4. Ensure all tests pass: pnpm test
5. Lint your code: pnpm lint:fix
6. Commit your changes: pnpm commit (uses conventional commits)
7. Push to the branch: git push origin feature/amazing-feature
8. Submit a pull request

$3

To contribute to documentation:

`bash


Start docs development server

pnpm docs:dev

Build documentation

pnpm docs:build
``

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

- Monaco Editor - The amazing code editor that powers VS Code
- Vue.js - The progressive JavaScript framework
- All contributors who have helped make this project better

💬 Community & Support

- 🐛 Report Issues
- 💡 Feature Requests
- 💬 Discussions
- 📚 Documentation

---

Made with ❤️ by bazingaedward and contributors.