Getting Monaco to work with Vuejs and electron

I'm doing nearly the same, just without the extra vue-monaco component. After struggling quite a bit, I could solve the problem:

function loadMonacoEditor () {  const nodeRequire = global.require  const loaderScript = document.createElement('script')  loaderScript.onload = () => {    const amdRequire = global.require    global.require = nodeRequire    var path = require('path')    function uriFromPath (_path) {      var pathName = path.resolve(_path).replace(/\\/g, '/')      if (pathName.length > 0 && pathName.charAt(0) !== '/') {        pathName = '/' + pathName      }      return encodeURI('file://' + pathName)    }    amdRequire.config({      baseUrl: uriFromPath(path.join(__dirname, '../../../node_modules/monaco-editor/min'))    })    // workaround monaco-css not understanding the environment    self.module = undefined    // workaround monaco-typescript not understanding the environment    self.process.browser = true    amdRequire(['vs/editor/editor.main'], function () {      this.monaco.editor.create(document.getElementById('container'), {        value: [          'function x() {',          '\tconsole.log("Hello world!");',          '}'        ].join('\n'),        language: 'javascript'      })    })  }  loaderScript.setAttribute('src', '../node_modules/monaco-editor/min/vs/loader.js')  document.body.appendChild(loaderScript)}

I've just taken the electron-amd sample and adjusted it a bit. I call the loadMonacoEditor function in the components' created function.

In order to not get the Not allowed to load local resource: file:///C:/.../node_modules/monaco-editor/min/vs/editor/editor.main.css problem, you also have to set

webPreferences: {  webSecurity: false}

in your instance of the BrowserWindow.