How to call CSInterface() in vue

Is it enough to introduce it on the HTML page like this？：

<body>
    <div id="root"></div>
    <script src="./CSInterface.js"></script>
    <script type="module" src="./main.ts"></script>
  </body>

Then there is an error here stating that there is no CSInterface ：

<template>
  <div id="app">
    <div class="container">
      <div class="button" @click="testScript">Click</div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'app',
  setup() {
    onMounted(() => {
      // Assign CSInterface to the csInterface ref
      csInterface.value = new CSInterface();
   console.log(csInterface.value);
    });
    const script = `
        if (app.activeDocument.selection.length > 0) {
          for (var i = 0; i < app.activeDocument.selection.length; i++) {
            var item = app.activeDocument.selection[i];
            if (item.typename === 'TextFrame') {
              item.createOutline(); // 转曲文本
            }
          }
        } else {
          alert('请先选择内容！');
        }
      `;
    const testScript = () => {
      // Loading a function manually
      csInterface.value.evalScript(script, (result) => {
          alert(result);
      });
    };

    return {
      msg,
      testScript,
      csInterface,
    };
  },
};
</script>

I couldn't find the demonstration case document manual for the first basic CEP. I hope you can give me some guidance

hyperbrew / bolt-cep

How to call CSInterface() in vue #134