title: How can I integrate Monaco with Vue.js?
body: <p>I created a fresh vue application and ran <code>npm install -s monaco-editor</code>, then I changed my App.vue to look like this:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app" style="width: 500px; height: 500px;"&gt;
          &lt;div ref="editor" style="width: 500px; height: 500px;"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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',
      });
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>When I run the application, I see the following in the JavaScript console:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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).</p>
  
  <p>Additionally, the editor does not render correctly unless height is explicitly specified - I don't think that's expected behavior.</p>
  
  <p>How can I make monaco-editor work correctly in Vue? I would like to avoid unofficial third-party wrappers such as <a href="https://github.com/egoist/vue-monaco" rel="noreferrer">https://github.com/egoist/vue-monaco</a> if possible for support reasons. </p>
  
  <p>Node/Vue newbie, so please be nice! </p>