imguolao / monaco-vue

Use monaco-editor loaded from CDN in Vue 2&3, no need to bundling.
https://imguolao.github.io/monaco-vue/
MIT License
211 stars 21 forks source link

Need vue2 example #63

Closed liganghui closed 3 months ago

liganghui commented 3 months ago

I use in vue2, but was an error My code :

<template>
  <div style="height: 500px">
    <vue-monaco-editor v-model="code" theme="vs-dark" :options="MONACO_EDITOR_OPTIONS" @mounted="handleMount" />
    <button @click="formatCode">Format Code</button>
  </div>
</template>
<script>
import { VueMonacoEditor } from "@guolao/vue-monaco-editor";

export default {
  name: "monaco",
  components: { VueMonacoEditor },
  data() {
    return {
      code: "// some code...",
      MONACO_EDITOR_OPTIONS: {
        automaticLayout: true,
        formatOnType: true,
        formatOnPaste: true,
      },
      editorRef: "",
    };
  },
  methods: {
    handleMount(editor) {
      this.editorRef = editor;
    },
    formatCode() {
      if (this.editorRef) {
        this.editorRef.getAction("editor.action.formatDocument").run();
      }
    },
  },
};
</script>
<style>
button {
  margin-top: 10px;
}
</style>

error image

version :

"@guolao/vue-monaco-editor": "^1.5.1",
 "@vue/composition-api": "^1.7.1",
 "vue": "^2.6.14",
imguolao commented 3 months ago

An example for vue2.6.14 is here

imguolao commented 3 months ago

Did you register the VueCompositionAPI plugin?

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)
liganghui commented 3 months ago

Thanks