So i tried to use the code provided by Andres Abadia but even with it i'm getting the error:

loader is not configured

(by the way if your using js remove the lang="ts" from the script tag)

But ace-code is working so where it goes wrong and why it does not load themes ?

The actual problem is you're using the ace-code package raw files like you was going to use them on an out Framework world but if you wanted to use some highlights or some other feature from it you couldn't load them because you'll have to use some scripts via CDN and import them one by one and you'll have some issues with the defined key so what i propose you to use directly use the package needed who is ace-builds with the all generated file to use (of course i will give you some snippet for Vue2 & Vue3) but there is a specification and thanks to the Ace team in this package they provide a webpack-resolver who will make your loader (Webpack in your case otherwise the error will be different with Vite if i'm not wrong) load all the files and understand them so like this you can use the snippets below and work with your pretty third part library Ace code

Don't forget to install file-loader as a devDependencie to load the generated file from the ace-builds package

You will still have an require error that comes from the library it use some require but with all the information i gaved you you can see some loader or some transpilador like Babel to make it work from your CommonJS to ES6

For Vue2:

Copy<template>
  <div class="ace-container">
    <!-- ID is used in official documents, it is forbidden to use it here, it is easy to cause problems after packaging later, just use ref or DOM -->
    <div class="ace-editor" ref="ace"></div>
  </div>
</template>

<script>
import ace from'ace-builds'
import'ace-builds/webpack-resolver'
import'ace-builds/src-noconflict/theme-monokai'
import'ace-builds/src-noconflict/mode-javascript'

export default {
  mounted () {
    this.aceEditor = ace.edit(this.$refs.ace, {
      maxLines: 20,
      minLines: 10,
      fontSize: 14,
      theme: this.themePath,
      mode: this.modePath,
      tabSize: 4
    })
  },
  data () {
    return {
      aceEditor: null,
      themePath:'ace/theme/monokai',//If webpack-resolver is not imported, the module path will report an error
      modePath:'ace/mode/javascript'//Same as above
    }
  }
}
</script>

<style scoped>
.ace-editor {
  width: 100%;
  height: 400px;
}
</style>

Vue3:

Copy<template>
  <div class="ace-container">
    <!-- ID is used in official documents, it is forbidden to use it here, it is easy to cause problems after packaging later, just use ref or DOM -->
    <div id="editor"></div>
  </div>
</template>

<script setup>
import {onMounted} from "vue";
import ace from "ace-builds";
import 'ace-builds/webpack-resolver'
import 'ace-builds/src-noconflict/theme-clouds';
import 'ace-builds/src-noconflict/mode-latex';


onMounted(() => {
  ace.edit('editor', {
    maxLines: 20,
    minLines: 10,
    fontSize: 14,
    theme: 'ace/theme/monokai',
    mode: 'ace/mode/javascript',
    tabSize: 4
  })
});
</script>

<style scoped>
#editor {
  width: 100%;
  height: 400px;
}
</style>

From my understanding, you would need to do either way to resolve the worker problem.

• Import this ace-builds/webpack-resolver:

import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";

import 'ace-builds/webpack-resolver';

• Use file-loader to load worker-json file & then configure ace worker:

import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";

import ace from "ace-builds";

// `webpack` would return the url for `worker-json.js`
// then we use it to configure `ace`
import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";

ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);