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!
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
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;
}
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.