How to import ACE code editor into vue without using its vue component?

Beginner in vue here. I would want to use ace code editor (this package ) in vue.

For learning purposes, I don’t want to use the vue2-component & vue3-component versions of the ace editor. How to do to it?

Why do I want to do this?

I am a programmer from pre-jquery era.Catching upto modern web development, starting with Vue. I noticed that lot of Vue component packages aren’t upto date with their plain JS library conterparts. I want to learn this so that I can use any non-vue library in vue.

EDIT:

As per the first answer, The editor is working but the syntax highlighting & themes aren’t working in the code editor. Probably, style sheets aren’t loading or working.

I get the following errors in the console though. I have no clue about what else should be configuring.

EDIT 2:

Answer

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:

<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:

<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>