{"id":11354,"library":"monaco-editor-vue","title":"Monaco Editor Component for Vue","description":"monaco-editor-vue is a Vue.js component that integrates the powerful Monaco Editor, the code editor that powers VS Code. As of version 1.0.10, it provides a convenient wrapper for embedding the editor within Vue applications, simplifying initialization and event handling. While the package itself is relatively small, it relies heavily on the `monaco-editor` core, which is a significant dependency. Key differentiators include its declarative API for setting properties like `language`, `theme`, and `options`, and handling editor events through standard Vue patterns. It's actively maintained with a stable API, though specific release cadence isn't explicitly defined, it follows standard npm versioning. A crucial aspect of its usage is the requirement for `monaco-editor-webpack-plugin` for proper bundle optimization and resource loading.","status":"active","version":"1.0.10","language":"javascript","source_language":"en","source_url":"https://github.com/FE-Mars/monaco-editor-vue","tags":["javascript","Vue","monaco","monaco-editor","vue-monaco-editor","monaco-editor-vue"],"install":[{"cmd":"npm install monaco-editor-vue","lang":"bash","label":"npm"},{"cmd":"yarn add monaco-editor-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add monaco-editor-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core editor engine, required for functionality.","package":"monaco-editor","optional":false},{"reason":"Essential for proper webpack bundling and language/feature loading of monaco-editor. While not a runtime dependency of the Vue component itself, it's a critical build-time dependency for most applications.","package":"monaco-editor-webpack-plugin","optional":false}],"imports":[{"note":"Primary component import. Typically used within a Vue component's `components` option.","wrong":"const MonacoEditor = require('monaco-editor-vue');","symbol":"MonacoEditor","correct":"import MonacoEditor from 'monaco-editor-vue';"},{"note":"This is a critical Webpack plugin, not part of the `monaco-editor-vue` package directly, but required for correct setup.","wrong":"const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');","symbol":"MonacoWebpackPlugin","correct":"import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';"}],"quickstart":{"code":"<!-- vue.config.js for Vue CLI (or webpack.config.js for plain webpack) -->\nconst MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');\n\nmodule.exports = {\n  chainWebpack: config => {\n    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [\n      {\n        languages: ['json', 'javascript', 'html', 'typescript', 'css']\n      }\n    ]);\n  },\n  // For older Vue CLI or plain webpack, ensure your publicPath is configured correctly if deploying to a sub-path\n  // publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/' \n};\n\n// src/App.vue\n<template>\n  <div id=\"app\">\n    <h1>Code Editor</h1>\n    <MonacoEditor\n      width=\"800\"\n      height=\"500\"\n      theme=\"vs-dark\"\n      language=\"javascript\"\n      :options=\"editorOptions\"\n      :value=\"code\"\n      @change=\"onChange\"\n      @editorBeforeMount=\"handleEditorBeforeMount\"\n      @editorMounted=\"handleEditorMounted\"\n    ></MonacoEditor>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\nimport MonacoEditor from 'monaco-editor-vue';\n\nexport default defineComponent({\n  name: 'App',\n  components: {\n    MonacoEditor\n  },\n  setup() {\n    const code = ref('function hello() {\\n  console.log(\"Hello Monaco Editor!\");\\n}');\n    const editorOptions = ref({\n      selectOnLineNumbers: true,\n      minimap: { enabled: true },\n      tabSize: 2\n    });\n\n    const onChange = (value: string) => {\n      console.log('Editor value changed:', value);\n      code.value = value; // Update model for controlled mode\n    };\n\n    const handleEditorBeforeMount = (monaco: any) => {\n      // Optionally register custom themes or languages here\n      console.log('Monaco editor before mount:', monaco);\n    };\n\n    const handleEditorMounted = (editor: any, monaco: any) => {\n      console.log('Monaco editor mounted:', editor, monaco);\n      // You can access the editor instance here to call its methods\n    };\n\n    return {\n      code,\n      editorOptions,\n      onChange,\n      handleEditorBeforeMount,\n      handleEditorMounted\n    };\n  }\n});\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n</style>","lang":"typescript","description":"This quickstart demonstrates how to set up `monaco-editor-vue` in a Vue 3 application with TypeScript, including the necessary Webpack configuration for the `monaco-editor-webpack-plugin`. It showcases basic usage with properties like `width`, `height`, `theme`, `language`, `options`, `value` (for controlled mode), and event handling for `change`, `editorBeforeMount`, and `editorMounted`."},"warnings":[{"fix":"Install `monaco-editor-webpack-plugin` and add it to your webpack configuration (or `chainWebpack` for Vue CLI). Ensure you list all required languages in its `languages` option to avoid bundling unnecessary editor features.","message":"The `monaco-editor-webpack-plugin` is a mandatory dependency for most setups and must be correctly configured in your build process (e.g., `webpack.config.js` or `vue.config.js` for Vue CLI). Omitting or misconfiguring it will lead to runtime errors or broken editor functionality, as Monaco Editor relies on its specific file loading mechanisms.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"If you need to switch themes, dynamically update the `theme` prop. For custom themes, register them using the `monaco` instance provided by the `editorBeforeMount` event.","message":"Monaco Editor, and by extension `monaco-editor-vue`, only supports a single active theme at any given time. While you can change the theme dynamically via the `theme` prop, custom themes must be registered globally with the Monaco instance before the editor mounts. Direct programmatic manipulation of multiple themes simultaneously is not supported by Monaco itself.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For controlled mode, always bind `value` and update it with the new value received from the `@change` event. For uncontrolled mode, omit the `value` prop and retrieve the editor content via its methods or the `change` event.","message":"The component supports both 'controlled' and 'uncontrolled' modes. If you bind a `value` prop, the component operates in controlled mode, requiring you to update the `value` prop yourself in response to `change` events. If no `value` prop is provided, it operates in uncontrolled mode, managing its own internal state. Mixing modes or not correctly handling `value` updates in controlled mode can lead to unexpected behavior.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Configure `monaco-editor-webpack-plugin` to include only the `languages` and `features` your application strictly needs. Consider dynamic imports if the editor is not required on the initial page load.","message":"Monaco Editor is a large library. Without proper tree-shaking and chunking through `monaco-editor-webpack-plugin`, it can significantly increase your application's bundle size, leading to slower load times. Importing all languages or features unnecessarily will exacerbate this problem.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `monaco-editor-webpack-plugin` is installed (`npm install monaco-editor-webpack-plugin`) and correctly added to your `webpack.config.js` or `vue.config.js` `plugins` array, or `chainWebpack` configuration for Vue CLI.","cause":"The `monaco-editor-webpack-plugin` is either missing from the webpack configuration or incorrectly configured, preventing Monaco's global environment from being initialized.","error":"Error: Monaco environment is not set up."},{"fix":"Run `npm install monaco-editor-vue` or `yarn add monaco-editor-vue` and verify the import statement `import MonacoEditor from 'monaco-editor-vue';` is correct.","cause":"The package `monaco-editor-vue` is not installed or the import path is incorrect.","error":"Error: Cannot find module 'monaco-editor-vue'"},{"fix":"In your `monaco-editor-webpack-plugin` configuration, specify only the `languages` and `features` you absolutely need. Consider increasing Node.js's heap limit for your build script (e.g., `NODE_OPTIONS=--max_old_space_size=4096 vue-cli-service build`).","cause":"Building a large application with Monaco Editor without proper optimization can consume excessive memory during the compilation process, especially if many languages and features are included without being tree-shaken.","error":"JavaScript heap out of memory"}],"ecosystem":"npm"}