   
npm install monaco-editor-vue3Monaco 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.
- ๐ฏ 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
- ๐ Complete Guide
- ๐ง API Reference
- ๐ฎ Examples
- ๐ Live Demo
``bashUsing pnpm (recommended)
pnpm add monaco-editor-vue3 monaco-editor
๐ Quick Start
$3
`vue
v-model:value="code"
language="javascript"
theme="vs-dark"
:options="editorOptions"
/>
`$3
`vue
v-model:value="modifiedCode"
:original="originalCode"
language="javascript"
theme="vs"
/>
`โ๏ธ Build Tool Integration
$3
`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
`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
v-model:value="code"
language="javascript"
:lifecycle="lifecycleHooks"
@error="handleError"
@ready="handleReady"
@loading="handleLoading"
>
Loading... {{ progress }}%
Error: {{ error.message }}
`#### 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-vue3Install dependencies
pnpm installStart development server
pnpm devRun tests
pnpm testBuild 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:devBuild documentation
pnpm docs:build
``This project is licensed under the MIT License.
- 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
- ๐ Report Issues
- ๐ก Feature Requests
- ๐ฌ Discussions
- ๐ Documentation
---
Made with โค๏ธ by bazingaedward and contributors.