{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install monaco-editor-vue"],"cli":null},"imports":["import MonacoEditor from 'monaco-editor-vue';","import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';"],"auth":{"required":false,"env_vars":[]},"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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}