Registry / web-framework / monaco-editor-vue

monaco-editor-vue

library1.0.10jsnpmunverified

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.

web-framework

npm install monaco-editor-vue

github ↗package ↗

INSTALL

IMPORT

SIG · MONACO-EDITOR-VUE

monaco-editor-vue

web-frameworkjavascriptv1.0.10

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MonacoEditor

✓ import MonacoEditor from 'monaco-editor-vue';

✗ const MonacoEditor = require('monaco-editor-vue');

Primary component import. Typically used within a Vue component's `components` option.

MonacoWebpackPlugin

✓ import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';

✗ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

This is a critical Webpack plugin, not part of the `monaco-editor-vue` package directly, but required for correct setup.

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

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { chainWebpack: config => { config.plugin('monaco-editor').use(MonacoWebpackPlugin, [ { languages: ['json', 'javascript', 'html', 'typescript', 'css'] } ]); }, // For older Vue CLI or plain webpack, ensure your publicPath is configured correctly if deploying to a sub-path // publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/' }; // src/App.vue <template> <div id="app"> <h1>Code Editor</h1> <MonacoEditor width="800" height="500" theme="vs-dark" language="javascript" :options="editorOptions" :value="code" @change="onChange" @editorBeforeMount="handleEditorBeforeMount" @editorMounted="handleEditorMounted" ></MonacoEditor> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import MonacoEditor from 'monaco-editor-vue'; export default defineComponent({ name: 'App', components: { MonacoEditor }, setup() { const code = ref('function hello() {\n console.log("Hello Monaco Editor!");\n}'); const editorOptions = ref({ selectOnLineNumbers: true, minimap: { enabled: true }, tabSize: 2 }); const onChange = (value: string) => { console.log('Editor value changed:', value); code.value = value; // Update model for controlled mode }; const handleEditorBeforeMount = (monaco: any) => { // Optionally register custom themes or languages here console.log('Monaco editor before mount:', monaco); }; const handleEditorMounted = (editor: any, monaco: any) => { console.log('Monaco editor mounted:', editor, monaco); // You can access the editor instance here to call its methods }; return { code, editorOptions, onChange, handleEditorBeforeMount, handleEditorMounted }; } }); </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

Debug

Known issues

breakingThe `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.

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.

affects: >=1.0.0

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

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.

affects: >=1.0.0

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

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.

affects: >=1.0.0

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

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.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Monaco environment is not set up.

The `monaco-editor-webpack-plugin` is either missing from the webpack configuration or incorrectly configured, preventing Monaco's global environment from being initialized.

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.

Error: Cannot find module 'monaco-editor-vue'

The package `monaco-editor-vue` is not installed or the import path is incorrect.

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.

JavaScript heap out of memory

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.

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`).

Upgrade

Version history

1.0.10latest on npm

Audit

Dependencies

monaco-editorrequiredCore editor engine, required for functionality.

monaco-editor-webpack-pluginrequiredEssential 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.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/FE-Mars/monaco-editor-vue ↗

packagehttps://www.npmjs.com/package/monaco-editor-vue ↗