aceeditor with vue3 without webpack(without build step)

I am trying to use ace editor without webpack(without build step) in vue 3 CDN based build. but was unable to find a suitable library which works well with vue3.

Here is the code without ace editor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Vue 3 Quickstart</title>
    <link rel="icon" href="./favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
</head>

<body>

<div id="app">
    ABC 

</div>

<div id="counter"> Counter: {{ counter }} </div>


<script type="module">
  const Counter = {
        data() {
            return {
                counter: 0
            }
        },
         mounted() {
          setInterval(() => {
              this.counter++
          }, 1000)
      }
    }

    Vue.createApp(Counter).mount('#counter');
</script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
    crossorigin="anonymous"></script>

</body>
</html>

Ref of library that can be used : https://www.npmjs.com/package/vue3-ace-editor

aceeditor with vue3 without webpack(without build step)

0 Answers