Vue Example Code

[peterje]

An example integrating Monaco with VueJS would be much appreciated. The ESM Webpack Plugin example did not seem to work (see here). There is currently an example React project but nothing for Vue yet. Does anyone have experience with Webpack and Vue and would be willing to post an example?

[y912765390]

https://zhuanlan.zhihu.com/p/47746336

[hediet]

Unfortunately, support for VueJS is out of scope for this issue tracker.

That said, have you had a look at egoist/vue-monaco?

If there are specific technical issues related to Monaco that prevent VueJS integration, please reach out and we will try to assist.
I will leave this issue open in case someone by the community can help.

[momomom123]

I'm using quasar basis on vue3，and there is a werid bug，if I using method:getValue(),UI will be freezed，I'm trying to install monaco-editor-webpack-plugin，can somebody teach me How to config monaco-editor-webpack-plugin in vue3， I google a lot about vue2,helpless!

[Month7]

Don't use vue3 data as an editor instance, it will cause stack overflow during getValue

wrong code

data() {
   editor: null
}
this.editor = monaco.editor.create(this.$el, {})

right code

let editor
editor = monaco.editor.create(this.$el, {})

[nookery]

I have found a workaround.

use monaco.editor.getModels()[0].getValue() instead of this.editor.getValue()

<template>
  <div ref="monaco"></div>
</template>

<script lang="ts">
import * as monaco from "monaco-editor";
import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      editor: null,
    };
  },
  mounted: function () {
    this.editor = monaco.editor.create(this.$refs.monaco, {
      value: "hello",
    });

    this.editor.getModel().onDidChangeContent(() => {
      console.log("content changed to", monaco.editor.getModels()[0].getValue());
    });
  },
});
</script>

If there are multiple editors:

this.editor = monaco.editor.create(this.$refs.monaco, {
    value: "hello"
});
let len = monaco.editor.getModels().length;
let model = monaco.editor.getModels()[len - 1];

this.editor.getModel().onDidChangeContent((e) => {
    console.log("changed", model.getValue());
});