How can I integrate Monaco with Vue.js?

Question

I created a fresh vue application and ran npm install -s monaco-editor, then I changed my App.vue to look like this:

<template>
    <div id="app" style="width: 500px; height: 500px;">
        <div ref="editor" style="width: 500px; height: 500px;"></div>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor';

export default {
  name: 'app',
  async mounted() {
    const el = this.$refs.editor;
    this.editor = monaco.editor.create(el, {
      value: "console.log('hello world');",
      language: 'javascript',
    });
  },
};
</script>

When I run the application, I see the following in the JavaScript console:

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/Microsoft/monaco-editor#faq simpleWorker.js:31
You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker 2 simpleWorker.js:33
Error: "Unexpected usage"
    loadForeignModule editorSimpleWorker.js:494
    _foreignProxy webWorker.js:54
languageFeatures.js:209
    _doValidate languageFeatures.js:209

I've tried searching for the error but most threads seem to focus on accessing files via file:/// which I am not doing (I'm accessing the node webserver).

Additionally, the editor does not render correctly unless height is explicitly specified - I don't think that's expected behavior.

How can I make monaco-editor work correctly in Vue? I would like to avoid unofficial third-party wrappers such as https://github.com/egoist/vue-monaco if possible for support reasons.

Node/Vue newbie, so please be nice!

Answer 1

You need to match the Vue CLI version with monaco-editor and monaco-editor-webpack-plugin

Vue2: Because vue2 is using webpack 4, we need to install:

npm i [email protected]

npm i [email protected]

Vue3 (if you have Vue CLI 5 probably it is based on webpack 5. If CLI 4 solution is the same like for Vue2)

npm i monaco-editor (> = 0.31. *)

npm i monaco-editor-webpack-plugin 7.0.0

vue.config.js:

const monacoWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = {
  configureWebpack: {
    plugins: [new monacoWebpackPlugin()],
  },
};

Source: https://www.npmjs.com/package/monaco-editor-webpack-plugin https://github.com/microsoft/monaco-editor/issues/2903

Answer 2

Try specifying the monaco webpack plugin in your webpack config:

const monacoWebpackPlugin = require('monaco-editor/webpack')

...

plugins: [
  new monacoWebpackPlugin()
]

Or install monaco-editor-webpack-plugin and try using that instead:

const monacoWebpackPlugin = require('monaco-editor-webpack-plugin')

...

plugins: [
  new monacoWebpackPlugin()
]

As for the height and width, you can either listen to the window resize and call editor.layout() or calculate the container size and pass the size to the editor.layout() method ⁽¹⁾.

Or you can try something from other posted answers in similar threads, for example:

<div ref="editor" class="monaco-editor"></div>

.monaco-editor {
  height: 100vh;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
}

Or something like this:

.monaco-editor {
  position: absolute; 
  left: 0; 
  top: 0;
  width: 100%; 
  height: 100%; 
  max-height: 100% !important;
  margin: 0; 
  padding: 0;
  overflow: hidden;
}