imguolao
commented
1 year ago Try the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UMD Example</title>
<script src="https://unpkg.com/vue@3.3.7/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-demi@0.14.6/lib/index.iife.js"></script>
<script src="https://unpkg.com/@monaco-editor/loader@1.4.0/lib/umd/monaco-loader.js"></script>
<script src="https://unpkg.com/@guolao/vue-monaco-editor@1.4.0/lib/umd/monaco-vue.js"></script>
<style>
html,
body,
#app {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<!-- Will render here -->
</div>
</body>
<script>
const { createApp, ref, shallowRef } = Vue
const { VueMonacoEditor } = monaco_vue
const app = createApp({
components: {
VueMonacoEditor,
},
template: `
<vue-monaco-editor
v-model:value="code"
theme="vs-dark"
:options="MONACO_EDITOR_OPTIONS"
@mount="handleMount"
/>
`,
setup() {
const MONACO_EDITOR_OPTIONS = {
automaticLayout: true,
formatOnType: true,
formatOnPaste: true,
}
const code = ref('// some code...')
const editorRef = shallowRef()
const handleMount = editor => (editorRef.value = editor)
return {
MONACO_EDITOR_OPTIONS,
code,
editorRef,
handleMount,
}
}
})
app.mount('#app')
</script>
</html>
JTrotta
Any UMD example?