monaco-editor-vue3
Advanced tools
Weekly downloads
Changelog
0.1.6 (2022-08-08)
Readme
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-vue3
Or
yarn add monaco-editor-vue3
Or
npm i monaco-editor-vue3
Use 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: 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 .editorWillMount
monaco
: monaco module
Called before mounting the editor.
editorDidMount
editor
: IStandaloneCodeEditor
for normal editor, IStandaloneDiffEditor
for diff editor.Called when the editor is mounted.
change
Editor value is updated.
value
: New editor value.event
: The event
from onDidChangeModelContent
.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.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
Monaco Editor Vue3 © bazingaedward, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
FAQs
   
The npm package monaco-editor-vue3 receives a total of 456 weekly downloads. As such, monaco-editor-vue3 popularity was classified as not popular.
We found that monaco-editor-vue3 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.