in case i have multiple monaco diff editor in the same page, diff will be only visible in the first instance

I have a Vue component that rendering diff editor of Monaco.
Once I have more than one instance of it on the same page, the diff is only shown in the first one.


      <div ref="diffEditor" class="vue--monaco-diff-editor"></div>


  async mounted(): Promise<void> {
    await this.importMonacoPackage();
    this.$nextTick(() => {
      if (!monaco) {
        throw new Error('monaco is not initialized');

      const originalModel = monaco.editor.createModel(
      const modifiedModel = monaco.editor.createModel(

      let diffEditorElement = this.$refs.diffEditor;
      this.diffEditor = monaco.editor.createDiffEditor(
        diffEditorElement as HTMLElement,
          scrollbar: {
            vertical: 'hidden',
            horizontal: 'hidden',
            handleMouseWheel: true,
          wordWrap: 'on',
          readOnly: true,
          scrollBeyondLastLine: false,
          minimap: {
            enabled: false,
          automaticLayout: true,

      if (!this.diffEditor) {

        original: originalModel,
        modified: modifiedModel,

      // set the editor height to scale with the content height automatically
      // see
      const originalContentHeight = this.diffEditor

      const modifiedContentHeight = this.diffEditor

      let contentHeight = Math.max(

      // allow for a single empty line at the bottom, default line height is 18px
      contentHeight = contentHeight + 18;

      const domNode = this.diffEditor.getDomNode(); = `${contentHeight}px`;
  methods: {
    async importMonacoPackage() {
      // eslint-disable-next-line import/no-unresolved
      monaco = await import('../../../lib/monaco-editor');

I’m using
"monaco-editor": "^0.24.0","vue": "^2.6.13".
any ideas what I’m doing wrong ? and why just the first instance showing the diff highlights?

Source: Vue – Stack Overflow

September 26, 2021
Category : News
Tags: javascript | monaco-editor | Vue.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.