Monaco Editor is the code editor that powers VS Code, now it's available as a Vue3 component <MonacoEditor> thanks to this project.
pnpm install monaco-editor-vue3Or
yarn add monaco-editor-vue3Or
npm i monaco-editor-vue3Use monaco-editor-webpack-plugin:
// webpack.config.js
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
plugins: [
new MonacoEditorPlugin({
// https://github.com/Microsoft/monaco-editor-webpack-plugin#options
// Include a subset of languages support
// Some language extensions like typescript are so huge that may impact build performance
// e.g. Build full languages support with webpack 4.0 takes over 80 seconds
// Languages are loaded on demand at runtime
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 rollup-plugin-monaco-editor:
// rollup.config.js
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',
},
// ...other config
plugins: [
// ...other plugins
// handle .css files
postcss(),
monaco({
languages: ['json'],
}),
nodeResolve(),
commonjs(),
],
};width: Editor width, eg:800pxor800.height: Editor height, eg:800pxor800.options: The second argument ofmonaco.editor.create.value: A shortcut to setoptions.value.theme: A shortcut to setoptions.theme.language: A shortcut to setoptions.language.diffEditor:booleanIndicate that this is a DiffEditor,falseby default.original: ifdiffEditorsettrue, this will be used .
- Params:
monaco:monaco module
Called before mounting the editor.
- Params:
editor:IStandaloneCodeEditorfor normal editor,IStandaloneDiffEditorfor diff editor.
Called when the editor is mounted.
Editor value is updated.
- Params:
value: New editor value.event: TheeventfromonDidChangeModelContent.
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.
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.
- 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
Monaco Editor Vue3 © bazingaedward, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent