Embed a VSCode style IDE in the browser

I am trying to find a vue 3 component that is a code editor with a similar theme as vscode. It should have the tree structure and be able to execute the code.

Some of the things I found that sadly did not fit the bill are:

monaco-editor

vue3-ace-editor

ace

I would like to send the files from the backend and have them rendered in the embedded code editor.

I got it to work. There is not a file tree but there is a component for it. Just need to add a watcher to the file tress and have what is selected in the ManacoEditor. Here is a basic example to get the IDE to render in the browser.

<template>
  <div>
      <MonacoEditor
          width="900"
          height="750"
          language="go"
          @change="onChange"
          :value="value"
      ></MonacoEditor>
  </div>
</template>

<script lang="ts">
import {Options, Vue} from "vue-class-component";
import MonacoEditor from "monaco-editor-vue3";
@Options({
  components: {
      MonacoEditor,
  },
  props: {
    editorInit: String,
    content: String,
  },
})
export default class Editor extends Vue {
    value = `
   package main
   import "fmt"
   func main() {
       fmt.println("HelloWorld")
   }`
    onChange() {
        console.log("value");
    }
    async mounted() {
        // add parameters here
    }
}
</script>

<style scoped>
</style>

package.json

 "dependencies": {
    "@codemirror/lang-html": "^6.1.1",
    "@codemirror/lang-javascript": "^6.1.0",
    "@codemirror/lang-json": "^6.0.0",
    "@monaco-editor/loader": "^1.3.2",
    "codemirror": "^6.0.1",
    "core-js": "^3.8.3",
    "monaco-editor": "^0.34.0",
    "monaco-editor-vue3": "^0.1.6",
    "monaco-editor-webpack-plugin": "^7.0.1",
    "monaco-languageclient": "^4.0.0",
    "vscode-ws-jsonrpc": "^2.0.0",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-codemirror": "^6.1.1",
    "vue-monaco": "^1.2.2",
    "vue-router": "4"
  },