{"id":22484764,"url":"https://github.com/bazingaedward/monaco-editor-vue3","last_synced_at":"2025-12-05T10:05:10.202Z","repository":{"id":44335819,"uuid":"379546797","full_name":"bazingaedward/monaco-editor-vue3","owner":"bazingaedward","description":"Monaco Editor for Vue3","archived":false,"fork":false,"pushed_at":"2024-06-05T09:26:38.000Z","size":1211,"stargazers_count":101,"open_issues_count":9,"forks_count":16,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T17:11:30.620Z","etag":null,"topics":["monaco-editor","typescript","vue3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bazingaedward.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-23T09:19:25.000Z","updated_at":"2025-03-23T05:58:59.000Z","dependencies_parsed_at":"2024-05-31T10:29:11.995Z","dependency_job_id":"8057bb3f-b641-4b4e-b4cc-d81858b2519a","html_url":"https://github.com/bazingaedward/monaco-editor-vue3","commit_stats":{"total_commits":28,"total_committers":4,"mean_commits":7.0,"dds":0.25,"last_synced_commit":"460c63f6b027db16bb9a3e8d0afda88731d3d8c7"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazingaedward%2Fmonaco-editor-vue3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazingaedward%2Fmonaco-editor-vue3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazingaedward%2Fmonaco-editor-vue3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bazingaedward%2Fmonaco-editor-vue3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bazingaedward","download_url":"https://codeload.github.com/bazingaedward/monaco-editor-vue3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247543595,"owners_count":20955865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["monaco-editor","typescript","vue3"],"created_at":"2024-12-06T17:11:30.933Z","updated_at":"2025-12-05T10:05:10.197Z","avatar_url":"https://github.com/bazingaedward.png","language":"JavaScript","funding_links":[],"categories":["TypeScript","Browser editor"],"sub_categories":[],"readme":"# Monaco Editor Vue3\n\n![npm](https://img.shields.io/npm/v/monaco-editor-vue3)\n![npm](https://img.shields.io/npm/dt/monaco-editor-vue3)\n![NPM](https://img.shields.io/npm/l/monaco-editor-vue3)\n![npm bundle size](https://img.shields.io/bundlephobia/min/format-rmb)\n\n[Monaco Editor](https://github.com/Microsoft/monaco-editor) is the code editor that powers VS Code, now it's available as Vue 3 components `\u003cCodeEditor\u003e` and `\u003cDiffEditor\u003e` with full TypeScript support and modern Vue 3 features.\n\n## ✨ Features\n\n- 🎯 **Full TypeScript Support** - Built with TypeScript for better development experience\n- 🎨 **Rich Code Editing** - Syntax highlighting, auto-completion, IntelliSense\n- 🌍 **Multi-Language Support** - 20+ programming languages including JavaScript, TypeScript, Python, Java\n- 🎭 **Theme Customization** - Built-in themes (VS, VS Dark, High Contrast) with custom theme support\n- 🔄 **Two-Way Binding** - Full v-model support for seamless Vue 3 integration\n- 📦 **Lightweight** - Tree-shakable and optimized for production\n- 🛠 **Developer Friendly** - Comprehensive error handling, loading states, and lifecycle hooks\n- 🎪 **Advanced Features** - Dual editor support (CodeEditor + DiffEditor), Hooks API, custom components\n\n## 📚 Documentation\n\n- [📖 Complete Guide](https://bazingaedward.github.io/monaco-editor-vue3/guide.html)\n- [🔧 API Reference](https://bazingaedward.github.io/monaco-editor-vue3/api.html)\n- [🎮 Examples](https://bazingaedward.github.io/monaco-editor-vue3/examples/)\n- [🌐 Live Demo](https://stackblitz.com/edit/vitejs-vite-e8jjho)\n\n## 📦 Install\n\n```bash\n# Using pnpm (recommended)\npnpm add monaco-editor-vue3 monaco-editor\n\n# Using yarn\nyarn add monaco-editor-vue3 monaco-editor\n\n# Using npm\nnpm install monaco-editor-vue3 monaco-editor\n```\n\n## 🚀 Quick Start\n\n### Basic CodeEditor\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"height: 400px;\"\u003e\n    \u003cCodeEditor\n      v-model:value=\"code\"\n      language=\"javascript\"\n      theme=\"vs-dark\"\n      :options=\"editorOptions\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport { CodeEditor } from 'monaco-editor-vue3';\n\nconst code = ref(`function hello() {\n  console.log('Hello, Monaco Editor Vue3!');\n}`);\n\nconst editorOptions = {\n  fontSize: 14,\n  minimap: { enabled: false },\n  automaticLayout: true\n};\n\u003c/script\u003e\n```\n\n### DiffEditor for Code Comparison\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"height: 400px;\"\u003e\n    \u003cDiffEditor\n      v-model:value=\"modifiedCode\"\n      :original=\"originalCode\"\n      language=\"javascript\"\n      theme=\"vs\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport { DiffEditor } from 'monaco-editor-vue3';\n\nconst originalCode = ref('const x = 1;');\nconst modifiedCode = ref('const x = 2;');\n\u003c/script\u003e\n```\n\n## ⚙️ Build Tool Integration\n\n### Webpack\n\nUse [monaco-editor-webpack-plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin):\n\n```js\n// webpack.config.js\nconst MonacoEditorPlugin = require('monaco-editor-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new MonacoEditorPlugin({\n      // https://github.com/Microsoft/monaco-editor-webpack-plugin#options\n      // Include a subset of languages support\n      // Some language extensions like typescript are so huge that may impact build performance\n      // e.g. Build full languages support with webpack 4.0 takes over 80 seconds\n      // Languages are loaded on demand at runtime\n      languages: ['javascript', 'css', 'html', 'typescript'],\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: ['style-loader', 'css-loader']\n      }\n    ]\n  }\n};\n```\n\n### Vite\n\nFor Vite projects, the CSS import is handled automatically.\n\n```ts\n// main.ts\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\ncreateApp(App).mount('#app');\n```\n\nCheck out our [live demo](https://stackblitz.com/edit/vitejs-vite-e8jjho) for a complete Vite setup.\n\n### Rollup\n\nUse [rollup-plugin-monaco-editor](https://github.com/chengcyber/rollup-plugin-monaco-editor):\n\n```js\n// rollup.config.js\nimport { nodeResolve } from '@rollup/plugin-node-resolve';\nimport postcss from 'rollup-plugin-postcss';\nimport commonjs from '@rollup/plugin-commonjs';\nimport monaco from 'rollup-plugin-monaco-editor';\n\nexport default {\n  output: {\n    format: 'es',\n    dir: 'dist',\n  },\n  // ...other config\n  plugins: [\n    // ...other plugins\n    // Handle .css files (important for Monaco Editor Vue3 styles)\n    postcss({\n      extract: true,\n      minimize: true,\n    }),\n    monaco({\n      languages: ['json'],\n    }),\n    nodeResolve(),\n    commonjs(),\n  ],\n};\n```\n\n## 🎨 Supported Languages \u0026 Themes\n\n### Programming Languages\n\nMonaco Editor Vue3 supports 20+ programming languages:\n\n| Language | Identifier | Features |\n|----------|------------|----------|\n| JavaScript | `javascript` | ✅ Syntax highlighting, IntelliSense, Error detection |\n| TypeScript | `typescript` | ✅ Syntax highlighting, IntelliSense, Type checking |\n| JSON | `json` | ✅ Syntax highlighting, Validation, Formatting |\n| HTML | `html` | ✅ Syntax highlighting, Auto-completion |\n| CSS | `css` | ✅ Syntax highlighting, Color decorators |\n| Python | `python` | ✅ Syntax highlighting, Basic IntelliSense |\n| Java | `java` | ✅ Syntax highlighting, Basic IntelliSense |\n| C++ | `cpp` | ✅ Syntax highlighting |\n| SQL | `sql` | ✅ Syntax highlighting, Keywords |\n| Markdown | `markdown` | ✅ Syntax highlighting, Preview |\n\nAnd many more: `xml`, `yaml`, `shell`, `php`, `go`, `rust`, `swift`, etc.\n\n### Built-in Themes\n\n| Theme | Identifier | Description |\n|-------|------------|-------------|\n| VS Light | `vs` | Light theme similar to VS Code light |\n| VS Dark | `vs-dark` | Dark theme similar to VS Code dark |\n| High Contrast Black | `hc-black` | High contrast dark theme |\n| High Contrast Light | `hc-light` | High contrast light theme |\n\n### Custom Themes\n\n```vue\n\u003cscript setup\u003e\nimport { CodeEditor } from 'monaco-editor-vue3';\nimport { ref } from 'vue';\n\nconst code = ref('console.log(\"Hello World\")');\n\n// Define custom theme\nconst customTheme = {\n  base: 'vs-dark',\n  inherit: true,\n  rules: [\n    { token: 'comment', foreground: '6A9955' },\n    { token: 'keyword', foreground: 'C586C0' }\n  ],\n  colors: {\n    'editor.background': '#1E1E1E'\n  }\n};\n\u003c/script\u003e\n```\n\n## 🎮 API Overview\n\n### CodeEditor Props\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `value` | `string` | `''` | Editor content (supports v-model) |\n| `language` | `string` | `'javascript'` | Programming language |\n| `theme` | `string` | `'vs'` | Editor theme |\n| `width` | `string \\| number` | `'100%'` | Editor width |\n| `height` | `string \\| number` | `'100%'` | Editor height |\n| `options` | `EditorOptions` | `{}` | Monaco editor options |\n\n### Events\n\n#### `editorWillMount`\n\n- **Params**: `monaco` - [Monaco module](https://microsoft.github.io/monaco-editor/api/index.html)\n- **Description**: Called before mounting the editor\n\n#### `editorDidMount`\n\n- **Params**: `editor` - [IStandaloneCodeEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html) for CodeEditor, [IStandaloneDiffEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonediffeditor.html) for DiffEditor\n- **Description**: Called when the editor is mounted\n\n#### `change`\n\n- **Params**: \n  - `value` - New editor value\n  - `event` - The event from [onDidChangeModelContent](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html#ondidchangemodelcontent)\n- **Description**: Editor value is updated\n\n### Advanced Features\n\n#### Loading State \u0026 Error Handling\n\n```vue\n\u003ctemplate\u003e\n  \u003cCodeEditor\n    v-model:value=\"code\"\n    language=\"javascript\"\n    :lifecycle=\"lifecycleHooks\"\n    @error=\"handleError\"\n    @ready=\"handleReady\"\n    @loading=\"handleLoading\"\n  \u003e\n    \u003c!-- Custom loading slot --\u003e\n    \u003ctemplate #loading=\"{ loading, progress }\"\u003e\n      \u003cdiv\u003eLoading... {{ progress }}%\u003c/div\u003e\n    \u003c/template\u003e\n    \n    \u003c!-- Custom error slot --\u003e\n    \u003ctemplate #error=\"{ error, retry }\"\u003e\n      \u003cdiv\u003eError: {{ error.message }}\u003c/div\u003e\n      \u003cbutton @click=\"retry\"\u003eRetry\u003c/button\u003e\n    \u003c/template\u003e\n  \u003c/CodeEditor\u003e\n\u003c/template\u003e\n```\n\n#### Hooks API\n\n```vue\n\u003cscript setup\u003e\nimport { useCodeEditor } from 'monaco-editor-vue3';\n\nconst { editor, loading, error } = useCodeEditor({\n  value: 'console.log(\"Hello World\")',\n  language: 'javascript',\n  theme: 'vs-dark'\n});\n\u003c/script\u003e\n```\n\n## 🔧 TypeScript Support\n\nMonaco Editor Vue3 is built with TypeScript and provides comprehensive type definitions out of the box.\n\n### Auto Type Inference\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue';\nimport { CodeEditor, type EditorOptions } from 'monaco-editor-vue3';\n\nconst code = ref\u003cstring\u003e('console.log(\"Hello World\")');\nconst options: EditorOptions = {\n  fontSize: 14,\n  minimap: { enabled: false }\n};\n\u003c/script\u003e\n```\n\n### Editor Instance Types\n\n```ts\nimport type { \n  IStandaloneCodeEditor, \n  IStandaloneDiffEditor \n} from 'monaco-editor';\n\n// CodeEditor instance type\nconst handleCodeEditorMount = (editor: IStandaloneCodeEditor) =\u003e {\n  editor.focus();\n};\n\n// DiffEditor instance type  \nconst handleDiffEditorMount = (editor: IStandaloneDiffEditor) =\u003e {\n  editor.getOriginalEditor().focus();\n};\n```\n\n### Custom Type Declaration (if needed)\n\nIf you encounter any type issues, create `types/monaco-editor-vue3.d.ts`:\n\n```ts\ndeclare module 'monaco-editor-vue3' {\n  // Custom type declarations\n}\n```\n\n## 🔧 Troubleshooting\n\n### Editor Not Displaying Correctly\n\n### Common Issues\n\n| Issue | Solution |\n|-------|----------|\n| Editor container is empty | 样式文件依赖说明已移除 |\n| Loading spinner not showing | 样式文件依赖说明已移除 |\n| Error boundary not styled | 样式文件依赖说明已移除 |\n| Custom themes not working | Check if Monaco Editor worker files are loaded correctly |\n\n### Build Issues\n\nIf you encounter build issues:\n\n1. **Webpack**: Ensure you're using `monaco-editor-webpack-plugin`\n2. **Vite**: Configure worker files properly (see our live demo)\n3. **Rollup**: Use `rollup-plugin-monaco-editor` and `postcss` for CSS processing\n\n## 🤝 Contributing\n\nWe welcome contributions from the community! Here's how you can help:\n\n### Development Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/bazingaedward/monaco-editor-vue3.git\ncd monaco-editor-vue3\n\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n\n# Run tests\npnpm test\n\n# Build the project\npnpm build\n```\n\n### Development Workflow\n\n1. Fork the repository\n2. Create your feature branch: `git checkout -b feature/amazing-feature`\n3. Make your changes and add tests\n4. Ensure all tests pass: `pnpm test`\n5. Lint your code: `pnpm lint:fix`\n6. Commit your changes: `pnpm commit` (uses conventional commits)\n7. Push to the branch: `git push origin feature/amazing-feature`\n8. Submit a pull request\n\n### Documentation\n\nTo contribute to documentation:\n\n```bash\n# Start docs development server\npnpm docs:dev\n\n# Build documentation\npnpm docs:build\n```\n\n## 📄 License\n\nThis project is licensed under the [MIT License](./LICENSE).\n\n## 🙏 Acknowledgments\n\n- [Monaco Editor](https://github.com/Microsoft/monaco-editor) - The amazing code editor that powers VS Code\n- [Vue.js](https://vuejs.org/) - The progressive JavaScript framework\n- All [contributors](https://github.com/bazingaedward/monaco-editor-vue3/contributors) who have helped make this project better\n\n## 💬 Community \u0026 Support\n\n- [🐛 Report Issues](https://github.com/bazingaedward/monaco-editor-vue3/issues)\n- [💡 Feature Requests](https://github.com/bazingaedward/monaco-editor-vue3/issues/new?template=feature_request.md)\n- [💬 Discussions](https://github.com/bazingaedward/monaco-editor-vue3/discussions)\n- [📚 Documentation](https://bazingaedward.github.io/monaco-editor-vue3/)\n\n---\n\nMade with ❤️ by [bazingaedward](https://github.com/bazingaedward) and [contributors](https://github.com/bazingaedward/monaco-editor-vue3/contributors).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbazingaedward%2Fmonaco-editor-vue3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbazingaedward%2Fmonaco-editor-vue3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbazingaedward%2Fmonaco-editor-vue3/lists"}