Monaco Editor Vue3

Monaco Editor is the code editor that powers VS Code, now it's available as a Vue3 component <MonacoEditor> thanks to this project.

Install

pnpm install monaco-editor-vue3

Or

yarn add monaco-editor-vue3

Or

npm i monaco-editor-vue3

Usage

Use ESM version with 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'],
    }),
  ],
};

Then use the component:

<template>
  <MonacoEditor
    theme="vs"
    :options="options"
    language="javascript"
    :width="800"
    :height="800"
    :diffEditor="true"
    :original="original"
    v-model:value="value"
  ></MonacoEditor>
</template>

<script>
import MonacoEditor from 'monaco-editor-vue3';

export default {
  components: {
    MonacoEditor,
  },

  data() {
    return {
      code: 'const noop = () => {}',
    };
  },
};
</script>

<style>
.editor {
  width: 600px;
  height: 800px;
}
</style>

Use ESM version with Vite

See Stackblitz Demo

Use ESM version with 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
    postcss(),
    monaco({
      languages: ['json'],
    }),
    nodeResolve(),
    commonjs(),
  ],
};

Props

• width: Editor width, eg: 800px or 800.
• height: Editor height, eg: 800px or 800.
• options: The second argument of monaco.editor.create.
• value: A shortcut to set options.value.
• theme: A shortcut to set options.theme.
• language: A shortcut to set options.language.
• diffEditor: boolean Indicate that this is a DiffEditor, false by default.
• original: if diffEditor set true, this will be used .

Component Events

editorWillMount

• Params:
  • monaco: monaco module

Called before mounting the editor.

editorDidMount

• Params:
  • editor: IStandaloneCodeEditor for normal editor, IStandaloneDiffEditor for diff editor.

Called when the editor is mounted.

change

Editor value is updated.

• Params:
  • value: New editor value.
  • event: The event from onDidChangeModelContent.

Editor Events

You can listen to the editor events directly like this:

<template>
  <MonacoEditor v-model="code" @editorDidMount="editorDidMount" />
</template>

<script>
export default {
  methods: {
    editorDidMount(editor) {
      // Listen to `scroll` event
      editor.onDidScrollChange((e) => {
        console.log(e);
      });
    },
  },

  data() {
    return {
      code: '...',
    };
  },
};
</script>

Refer to this page for all editor events.

Typescript

create monaco-editor-vue3.d.ts in your root.

declare module 'monaco-editor-vue3';

This will allow ts compilation without errors, but may not include all the types.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

Monaco Editor Vue3 © bazingaedward, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).