Como posso integrar o Monaco ao Vue.js?

Criei um aplicativo vue novo e executei npm install -s monaco-editor, depois mudei meu App.vue para ficar assim:

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

Quando executo o aplicativo, vejo o seguinte no console do JavaScript:

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

Eu tentei procurar pelo erro, mas a maioria dos threads parece se concentrar em acessar arquivos via file: /// o que eu não estou fazendo (estou acessando o servidor da web do nó).

Além disso, o editor não é renderizado corretamente, a menos que a altura seja especificada explicitamente - não acho que esse seja o comportamento esperado.

Como posso fazer o editor-monaco funcionar corretamente no Vue? Gostaria de evitar invólucros não oficiais de terceiros, como https://github.com/egoist/vue-monaco, se possível por motivos de suporte.

Node / Vue novato, por favor, seja gentil!

Mônaco acusa os trabalhadores por file://padrão, mas não é um trabalho na web.

Você deve substituí-lo http://definindo o MonacoEnviorment manualmente ou usando o Monaco Webpack Plugin .

Consulte os documentos oficiais

Tente especificar o webpackplugin monaco na sua configuração do webpack:

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

...

plugins: [
  new monacoWebpackPlugin()
]

Ou instale o monaco-editor-webpack-plugin e tente usá-lo:

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

...

plugins: [
  new monacoWebpackPlugin()
]

Quanto ao heighte width, você pode ouvir o redimensionamento da janela e chamar editor.layout()ou calcular o tamanho do contêiner e passar o tamanho para o editor.layout()método ⁽¹⁾ .

Ou você pode tentar algo de outras respostas postadas em tópicos semelhantes, por exemplo:

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

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

body {
  margin: 0;
  padding: 0;
}

Ou algo parecido com isto:

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