monaco-editor-vue3

Monaco Editor Vue3

Monaco Editor is the code editor that powers VS Code, now it's available as Vue 3 components <CodeEditor> and <DiffEditor> 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

# 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

Basic CodeEditor

<template>
  <div style="height: 400px;">
    <CodeEditor
      v-model:value="code"
      language="javascript"
      theme="vs-dark"
      :options="editorOptions"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CodeEditor } from 'monaco-editor-vue3';

const code = ref(`function hello() {
  console.log('Hello, Monaco Editor Vue3!');
}`);

const editorOptions = {
  fontSize: 14,
  minimap: { enabled: false },
  automaticLayout: true
};
</script>

DiffEditor for Code Comparison

<template>
  <div style="height: 400px;">
    <DiffEditor
      v-model:value="modifiedCode"
      :original="originalCode"
      language="javascript"
      theme="vs"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { DiffEditor } from 'monaco-editor-vue3';

const originalCode = ref('const x = 1;');
const modifiedCode = ref('const x = 2;');
</script>

⚙️ Build Tool Integration

Webpack

Use monaco-editor-webpack-plugin:

// 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']
      }
    ]
  }
};

Vite

For Vite projects, the CSS import is handled automatically.

// 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.

Rollup

Use rollup-plugin-monaco-editor:

// 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

Programming Languages

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.

Built-in Themes

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

Custom Themes

<script setup>
import { CodeEditor } from 'monaco-editor-vue3';
import { ref } from 'vue';

const code = ref('console.log("Hello World")');

// Define custom theme
const customTheme = {
  base: 'vs-dark',
  inherit: true,
  rules: [
    { token: 'comment', foreground: '6A9955' },
    { token: 'keyword', foreground: 'C586C0' }
  ],
  colors: {
    'editor.background': '#1E1E1E'
  }
};
</script>

🎮 API Overview

CodeEditor Props

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

Events

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

Advanced Features

Loading State & Error Handling

<template>
  <CodeEditor
    v-model:value="code"
    language="javascript"
    :lifecycle="lifecycleHooks"
    @error="handleError"
    @ready="handleReady"
    @loading="handleLoading"
  >
    <!-- Custom loading slot -->
    <template #loading="{ loading, progress }">
      <div>Loading... {{ progress }}%</div>
    </template>
    
    <!-- Custom error slot -->
    <template #error="{ error, retry }">
      <div>Error: {{ error.message }}</div>
      <button @click="retry">Retry</button>
    </template>
  </CodeEditor>
</template>

Hooks API

<script setup>
import { useCodeEditor } from 'monaco-editor-vue3';

const { editor, loading, error } = useCodeEditor({
  value: 'console.log("Hello World")',
  language: 'javascript',
  theme: 'vs-dark'
});
</script>

🔧 TypeScript Support

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

Auto Type Inference

<script setup lang="ts">
import { ref } from 'vue';
import { CodeEditor, type EditorOptions } from 'monaco-editor-vue3';

const code = ref<string>('console.log("Hello World")');
const options: EditorOptions = {
  fontSize: 14,
  minimap: { enabled: false }
};
</script>

Editor Instance Types

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();
};

Custom Type Declaration (if needed)

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

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

🔧 Troubleshooting

Editor Not Displaying Correctly

Common Issues

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

Build Issues

If you encounter build issues:

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

🤝 Contributing

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

Development Setup

# 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

Development Workflow

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

Documentation

To contribute to documentation:

# 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.