Monaco Editor Vue3

Monaco Editor is the code editor that powers VS Code, now it's available as a Vue3 component <MonacoEditor>
thanks to this project.
Install
pnpm install monaco-editor-vue3
Or
yarn add monaco-editor-vue3
Or
npm i monaco-editor-vue3
Usage
Use ESM version with webpack
Use monaco-editor-webpack-plugin:
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
plugins: [
new MonacoEditorPlugin({
languages: ['javascript', 'css', 'html', 'typescript']
})
]
}
Then use the component:
<template>
<MonacoEditor
theme="vs"
:options="options"
language="javascript"
:width="800"
:height="800"
:diffEditor="true"
:original="original"
v-model:value="value"
></MonacoEditor>
</template>
<script>
import MonacoEditor from 'monaco-editor-vue3'
export default {
components: {
MonacoEditor
},
data() {
return {
code: 'const noop = () => {}'
}
}
}
</script>
<style>
.editor {
width: 600px;
height: 800px;
}
</style>
Use ESM version with Vite
See Stackblitz Demo
Use ESM version with rollup
Use rollup-plugin-monaco-editor:
import { nodeResolve } from '@rollup/plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import commonjs from '@rollup/plugin-commonjs';
import monaco from 'rollup-plugin-monaco-editor';
export default {
output: {
format: 'es',
dir: 'dist',
},
plugins: [
postcss(),
monaco({
languages: ['json'],
}),
nodeResolve(),
commonjs(),
],
};
Props
width
: Editor width, eg: 800px
or 800
.height
: Editor height, eg: 800px
or 800
.options
: The second argument of monaco.editor.create
.value
: A shortcut to set options.value
.theme
: A shortcut to set options.theme
.language
: A shortcut to set options.language
.diffEditor
: boolean
Indicate that this is a DiffEditor, false
by default.original
: if diffEditor
set true
, this will be used .
Component Events
editorWillMount
Called before mounting the editor.
editorDidMount
Called when the editor is mounted.
change
Editor value is updated.
Editor Events
You can listen to the editor events directly like this:
<template>
<MonacoEditor v-model="code" @editorDidMount="editorDidMount" />
</template>
<script>
export default {
methods: {
editorDidMount(editor) {
// Listen to `scroll` event
editor.onDidScrollChange(e => {
console.log(e)
})
}
},
data() {
return {
code: '...'
}
}
}
</script>
Refer to this page for all editor events.
Typescript
create monaco-editor-vue3.d.ts
in your root.
declare module "monaco-editor-vue3";
This will allow ts compilation without errors, but may not include all the types.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
Monaco Editor Vue3 © bazingaedward, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).