How can I integrate Monaco with Vue.js?

user_12260301 0
Viewed 7588

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!

vue.js javascript
3 Answers

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 (1).

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;
}
user_121258810

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 monaco-editor@0.30.1

npm i monaco-editor-webpack-plugin@6.0.0

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

user_181267910

Monaco acceses workers by file:// by default, but it is not work in web.

You should replace it with http:// by setting MonacoEnviorment manually or using Monaco Webpack Plugin.

Refer to the official docs

user_62118660
Related